diff --git a/src/Common/SearchableDropdown.styles.ts b/src/Common/SearchableDropdown.styles.ts index 83384176b..95827112e 100644 --- a/src/Common/SearchableDropdown.styles.ts +++ b/src/Common/SearchableDropdown.styles.ts @@ -33,12 +33,18 @@ export const buttonLabelStyles: ITextStyles = { }, }; +export const buttonWrapperStyles: React.CSSProperties = { + position: "relative", + width: "100%", +}; + export const chevronStyles: React.CSSProperties = { position: "absolute", right: "8px", top: "50%", transform: "translateY(-50%)", pointerEvents: "none", + fontSize: "12px", }; export const calloutContentStyles: IStackStyles = { diff --git a/src/Common/SearchableDropdown.tsx b/src/Common/SearchableDropdown.tsx index a3a20b151..77d2309e9 100644 --- a/src/Common/SearchableDropdown.tsx +++ b/src/Common/SearchableDropdown.tsx @@ -2,6 +2,7 @@ import { Callout, DefaultButton, DirectionalHint, + Icon, ISearchBoxStyles, Label, SearchBox, @@ -12,6 +13,7 @@ import * as React from "react"; import { useCallback, useMemo, useRef, useState } from "react"; import { buttonLabelStyles, + buttonWrapperStyles, calloutContentStyles, chevronStyles, emptyMessageStyles, @@ -87,8 +89,8 @@ export const SearchableDropdown = ({ const buttonLabel = selectedItem ? getDisplayText(selectedItem) : items?.length === 0 - ? `No ${label}s Found` - : placeholder; + ? `No ${label}s Found` + : placeholder; const buttonId = `${className}-button`; const buttonStyles = getDropdownButtonStyles(disabled); @@ -96,7 +98,7 @@ export const SearchableDropdown = ({ return ( -
+
({ disabled={disabled} > {buttonLabel} - +
{isOpen && (