@khanacademy/wonder-blocks-dropdown 2.7.0 → 2.7.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.7.1
+
+### Patch Changes
+
+-   9c2580e6: Fixed the search field focus bug in dropdowns
+
 ## 2.7.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -35,7 +35,8 @@ const filterableDropdownStyle = {
 };
 const searchInputStyle = {
   margin: Spacing.xSmall_8,
-  marginTop: Spacing.xxxSmall_4
+  marginTop: Spacing.xxxSmall_4,
+  minHeight: "auto"
 };
 const DROPDOWN_ITEM_HEIGHT = 40;
 const MAX_VISIBLE_ITEMS = 9;
@@ -491,6 +492,14 @@ class SearchTextInput extends React.Component {
     return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
   }
 
+  componentDidMount() {
+    if (this.props.autofocus) {
+      var _this$props$itemRef;
+
+      (_this$props$itemRef = this.props.itemRef) == null ? void 0 : _this$props$itemRef.current.focus();
+    }
+  }
+
   render() {
     const {
       labels,
@@ -1102,7 +1111,8 @@ class DropdownCore extends React.Component {
             this.handleClickFocus(0);
             this.focusCurrentItem();
           },
-          style: searchInputStyle
+          style: searchInputStyle,
+          autofocus: this.focusedIndex === 0
         }));
       }
 
@@ -1135,7 +1145,8 @@ class DropdownCore extends React.Component {
           },
           populatedProps: {
             style: searchInputStyle,
-            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null
+            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
+            autofocus: this.focusedIndex === 0
           }
         });
       }

package/dist/index.js

@@ -127,7 +127,10 @@ const filterableDropdownStyle = {
 };
 const searchInputStyle = {
   margin: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xSmall_8,
-  marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xxxSmall_4
+  marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xxxSmall_4,
+  // Set `minHeight` to "auto" to stop the search field from having
+  // a height of 0 and being cut off.
+  minHeight: "auto"
 }; // The default item height
 
 const DROPDOWN_ITEM_HEIGHT = 40;
@@ -257,6 +260,23 @@ class SearchTextInput extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
   }
 
+  // TODO(WB-1310): Remove `componentDidMount` autofocus on the search field
+  // after making the search field sticky.
+  componentDidMount() {
+    // We need to re-focus on the text input after it mounts because of
+    // the case in which the dropdown switches between virtualized and
+    // non-virtualized. It can rerender the search field as the user is
+    // typing based on the number of search results, which results
+    // in losing focus on the field so the user can't type anymore.
+    // To work around this issue, this temporary fix auto-focuses on the
+    // search field on mount.
+    if (this.props.autofocus) {
+      var _this$props$itemRef;
+
+      (_this$props$itemRef = this.props.itemRef) == null ? void 0 : _this$props$itemRef.current.focus();
+    }
+  }
+
   render() {
     const {
       labels,
@@ -1253,7 +1273,13 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
             this.focusCurrentItem();
           },
           // apply custom styles
-          style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "h"]
+          style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "h"],
+          // TODO(WB-1310): Remove the autofocus prop after making
+          // the search field sticky.
+          // Currently autofocusing on the search field to work
+          // around it losing focus on mount when switching between
+          // virtualized and non-virtualized dropdown filter results.
+          autofocus: this.focusedIndex === 0
         });
       } // Render OptionItem and/or ActionItem elements.
 
@@ -1299,7 +1325,13 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           populatedProps: {
             style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "h"],
             // pass the current ref down to the input element
-            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null
+            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
+            // TODO(WB-1310): Remove the autofocus prop after making
+            // the search field sticky.
+            // Currently autofocusing on the search field to work
+            // around it losing focus on mount when switching between
+            // virtualized and non-virtualized dropdown filter results.
+            autofocus: this.focusedIndex === 0
           }
         };
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",

package/src/components/__tests__/dropdown-core-virtualized.test.js

@@ -8,15 +8,6 @@ import DropdownCoreVirtualized from "../dropdown-core-virtualized.js";
 import SearchTextInput from "../search-text-input.js";
 
 describe("DropdownCoreVirtualized", () => {
-    beforeEach(() => {
-        jest.useFakeTimers();
-    });
-
-    afterEach(() => {
-        jest.runOnlyPendingTimers();
-        jest.useRealTimers();
-    });
-
     it("should sort the items on first load", () => {
         // Arrange
         const optionItems = ["a", "bb", "ccc"].map((item, i) => ({

package/src/components/dropdown-core.js

@@ -669,6 +669,12 @@ class DropdownCore extends React.Component<Props, State> {
                     },
                     // apply custom styles
                     style: searchInputStyle,
+                    // TODO(WB-1310): Remove the autofocus prop after making
+                    // the search field sticky.
+                    // Currently autofocusing on the search field to work
+                    // around it losing focus on mount when switching between
+                    // virtualized and non-virtualized dropdown filter results.
+                    autofocus: this.focusedIndex === 0,
                 });
             }
 
@@ -719,6 +725,12 @@ class DropdownCore extends React.Component<Props, State> {
                         itemRef: this.state.itemRefs[focusIndex]
                             ? this.state.itemRefs[focusIndex].ref
                             : null,
+                        // TODO(WB-1310): Remove the autofocus prop after making
+                        // the search field sticky.
+                        // Currently autofocusing on the search field to work
+                        // around it losing focus on mount when switching between
+                        // virtualized and non-virtualized dropdown filter results.
+                        autofocus: this.focusedIndex === 0,
                     },
                 };
             }

package/src/components/search-text-input.js

@@ -51,6 +51,13 @@ type Props = {|
      * Test ID used for e2e testing.
      */
     testId?: string,
+
+    /**
+     * Automatically focus on this search field on mount.
+     * TODO(WB-1310): Remove the autofocus prop after making
+     * the search field sticky in dropdowns.
+     */
+    autofocus?: boolean,
 |};
 
 type DefaultProps = {|
@@ -71,6 +78,21 @@ export default class SearchTextInput extends React.Component<Props> {
         },
     };
 
+    // TODO(WB-1310): Remove `componentDidMount` autofocus on the search field
+    // after making the search field sticky.
+    componentDidMount() {
+        // We need to re-focus on the text input after it mounts because of
+        // the case in which the dropdown switches between virtualized and
+        // non-virtualized. It can rerender the search field as the user is
+        // typing based on the number of search results, which results
+        // in losing focus on the field so the user can't type anymore.
+        // To work around this issue, this temporary fix auto-focuses on the
+        // search field on mount.
+        if (this.props.autofocus) {
+            this.props.itemRef?.current.focus();
+        }
+    }
+
     static __IS_SEARCH_TEXT_INPUT__: boolean = true;
 
     render(): React.Node {

package/src/components/single-select.stories.js

@@ -79,25 +79,28 @@ const optionItems = new Array(1000)
     ));
 
 type Props = {|
+    selectedValue?: ?string,
     opened: boolean,
 |};
 
 type State = {|
-    selectedValue: string,
+    selectedValue?: ?string,
     opened: boolean,
 |};
 
 type DefaultProps = {|
+    selectedValue: $PropertyType<Props, "selectedValue">,
     opened: $PropertyType<Props, "opened">,
 |};
 
 class SingleSelectWithFilter extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
+        selectedValue: "2",
         opened: false,
     };
 
     state: State = {
-        selectedValue: "2",
+        selectedValue: this.props.selectedValue,
         opened: this.props.opened,
     };
 
@@ -167,6 +170,10 @@ export const WithFilterOpened: StoryComponentType = () => (
     <SingleSelectWithFilter opened={true} />
 );
 
+export const WithFilterOpenedNoValueSelected: StoryComponentType = () => (
+    <SingleSelectWithFilter opened={true} selectedValue={null} />
+);
+
 export const DropdownInModal: StoryComponentType = () => {
     const [value, setValue] = React.useState(null);
     const [opened, setOpened] = React.useState(true);

package/src/util/constants.js

@@ -24,6 +24,9 @@ export const filterableDropdownStyle = {
 export const searchInputStyle = {
     margin: Spacing.xSmall_8,
     marginTop: Spacing.xxxSmall_4,
+    // Set `minHeight` to "auto" to stop the search field from having
+    // a height of 0 and being cut off.
+    minHeight: "auto",
 };
 
 // The default item height