diff --git a/.changeset/kind-avocados-sparkle.md b/.changeset/kind-avocados-sparkle.md new file mode 100644 index 00000000000..0cb17ab4d09 --- /dev/null +++ b/.changeset/kind-avocados-sparkle.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +- Fixed `onFocus` and `onBlur` events of Select component diff --git a/polaris-react/src/components/Select/Select.tsx b/polaris-react/src/components/Select/Select.tsx index 56c346e9fa9..a1aa028cabd 100644 --- a/polaris-react/src/components/Select/Select.tsx +++ b/polaris-react/src/components/Select/Select.tsx @@ -71,9 +71,9 @@ export interface SelectProps { /** Callback when selection is changed */ onChange?(selected: string, id: string): void; /** Callback when select is focused */ - onFocus?(): void; + onFocus?(event?: React.FocusEvent): void; /** Callback when focus is removed */ - onBlur?(): void; + onBlur?(event?: React.FocusEvent): void; /** Visual required indicator, add an asterisk to label */ requiredIndicator?: boolean; /** Indicates the tone of the select */ @@ -114,9 +114,21 @@ export function Select({ disabled && styles.disabled, ); - const handleFocus = useCallback(() => { - toggleFocused(); - }, [toggleFocused]); + const handleFocus = useCallback( + (event: React.FocusEvent) => { + toggleFocused(); + onFocus?.(event); + }, + [onFocus, toggleFocused], + ); + + const handleBlur = useCallback( + (event: React.FocusEvent) => { + toggleFocused(); + onBlur?.(event); + }, + [onBlur, toggleFocused], + ); const handleChange = onChange ? (event: React.ChangeEvent) => @@ -196,14 +208,8 @@ export function Select({ value={value} className={styles.Input} disabled={disabled} - onFocus={() => { - handleFocus(); - onFocus?.(); - }} - onBlur={() => { - toggleFocused(); - onBlur?.(); - }} + onFocus={handleFocus} + onBlur={handleBlur} onChange={handleChange} aria-invalid={Boolean(error)} aria-describedby={