Merge pull request #824 from buildo/disable_select_autoopenonfocus

Allow control of Select open-on-focus behavior

Author: federico-ercoles

packages/bento-design-system/src/SelectField/BaseSelect.tsx

@@ -107,7 +107,7 @@ export function BaseSelect<A>(props: Props<A>) {
         placeholder={placeholder}
         menuPortalTarget={menuPortalTarget.current}
         components={selectComponents}
-        openMenuOnFocus
+        openMenuOnFocus={props.openMenuOnFocus ?? dropdownConfig.openMenuOnFocus}
         styles={selectComponents.styles<SelectOption<A>>()}
         validationState={validationState}
         isMulti={isMulti}

packages/bento-design-system/src/SelectField/Config.ts

@@ -16,4 +16,5 @@ export type DropdownConfig = {
   openIndicatorIconSize: IconProps["size"];
   chipColor: ChipProps["color"];
   chipSpacing: BentoSprinkles["gap"];
+  openMenuOnFocus: boolean;
 };

packages/bento-design-system/src/SelectField/types.ts

@@ -38,4 +38,5 @@ export type BaseSelectProps<A> = {
   noOptionsMessage?: LocalizedString;
   isReadOnly?: boolean;
   searchable?: boolean;
+  openMenuOnFocus?: boolean;
 };

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -499,6 +499,7 @@ export const dropdown: DropdownConfig = {
   openIndicatorIconSize: 24,
   chipColor: "indigo",
   chipSpacing: 4,
+  openMenuOnFocus: true,
 };
 
 export const table: TableConfig = {