@khanacademy/wonder-blocks-dropdown 2.6.10 → 2.7.2

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

@@ -1,14 +1,14 @@
 // @flow
 import * as React from "react";
-import {shallow} from "enzyme";
-import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import SearchTextInput from "../search-text-input.js";
 
 describe("SearchTextInput", () => {
-    it("text input container should be focused when focusing on the input", () => {
+    test("text input container should be focused when focusing on the input", () => {
         // Arrange
-        const wrapper = shallow(
+        render(
             <SearchTextInput
                 searchText=""
                 testId="search-text-input"
@@ -16,18 +16,18 @@ describe("SearchTextInput", () => {
             />,
         );
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+        const input = screen.getByTestId("search-text-input");
 
         // Act
-        input.simulate("focus");
+        input.focus();
 
         // Assert
-        expect(wrapper).toHaveState({focused: true});
+        expect(input).toHaveFocus();
     });
 
-    it("text input should not be focused when losing focus", () => {
+    test("text input should not be focused when losing focus", () => {
         // Arrange
-        const wrapper = shallow(
+        render(
             <SearchTextInput
                 searchText=""
                 testId="search-text-input"
@@ -35,23 +35,23 @@ describe("SearchTextInput", () => {
             />,
         );
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+        const input = screen.getByTestId("search-text-input");
         // focus in
-        input.simulate("focus");
+        input.focus();
 
         // Act
         // focus out
-        input.simulate("blur");
+        input.blur();
 
         // Assert
-        expect(wrapper).toHaveState({focused: false});
+        expect(input).not.toHaveFocus();
     });
 
-    it("onChange should be invoked if text input changes", () => {
+    test("onChange should be invoked if text input changes", () => {
         // Arrange
         const onChangeMock = jest.fn();
 
-        const wrapper = shallow(
+        render(
             <SearchTextInput
                 searchText=""
                 testId="search-text-input"
@@ -59,87 +59,154 @@ describe("SearchTextInput", () => {
             />,
         );
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+        const input = screen.getByTestId("search-text-input");
 
         // Act
-        input.simulate("change", {
-            target: {value: "query"},
-            preventDefault: jest.fn(),
-        });
-
-        wrapper.update();
+        userEvent.paste(input, "value");
 
         // Assert
-        expect(onChangeMock).toHaveBeenCalledWith("query");
+        expect(onChangeMock).toHaveBeenCalledWith("value");
     });
 
-    it("displays the dismiss button when search text exists", () => {
+    test("displays the dismiss button when search text exists", () => {
         // Arrange
-        const wrapper = shallow(
-            <SearchTextInput
-                searchText="query"
-                testId="search-text-input"
-                onChange={() => jest.fn()}
-                onClick={() => jest.fn()}
-            />,
-        );
+        const SearchFieldWrapper = () => {
+            const [value, setValue] = React.useState("");
+            return (
+                <SearchTextInput
+                    searchText={value}
+                    testId="search-text-input"
+                    onChange={setValue}
+                />
+            );
+        };
+
+        render(<SearchFieldWrapper />);
+
+        const input = screen.getByTestId("search-text-input");
+
+        // Act
+        userEvent.paste(input, "value");
+
+        // Assert
+        const clearIconButton = screen.queryByRole("button");
+        expect(clearIconButton).toBeInTheDocument();
+    });
 
-        const input = wrapper.find(`[data-test-id="search-text-input"]`);
+    test("search should be cleared if the clear icon is clicked", () => {
+        // Arrange
+        const SearchFieldWrapper = () => {
+            const [value, setValue] = React.useState("initial value");
+            return (
+                <SearchTextInput
+                    searchText={value}
+                    testId="search-text-input"
+                    onChange={setValue}
+                />
+            );
+        };
+
+        render(<SearchFieldWrapper />);
+
+        const input = screen.getByTestId("search-text-input");
+        const clearIconButton = screen.queryByRole("button");
 
         // Act
-        input.simulate("change", {
-            target: {value: "query"},
-            preventDefault: jest.fn(),
-        });
+        userEvent.click(clearIconButton);
 
         // Assert
-        expect(wrapper.find("IconButton")).toExist();
+        expect(input).toHaveValue("");
     });
 
-    it("search should be dismissed if the close icon is clicked", () => {
+    test("focus should return to the input element after clear button is clicked", () => {
         // Arrange
-        const onClickMock = jest.fn();
+        const SearchFieldWrapper = () => {
+            const [value, setValue] = React.useState("");
+            return (
+                <SearchTextInput
+                    searchText={value}
+                    testId="search-text-input"
+                    onChange={setValue}
+                />
+            );
+        };
+
+        render(<SearchFieldWrapper />);
+
+        const input = screen.getByTestId("search-text-input");
+        userEvent.paste(input, "something");
 
-        const wrapper = shallow(
+        // Act
+        const clearIconButton = screen.queryByRole("button");
+        userEvent.click(clearIconButton);
+
+        // Assert
+        expect(input).toHaveFocus();
+    });
+
+    test("placeholder should be updated by the parent component", () => {
+        // Arrange
+        const {rerender} = render(
             <SearchTextInput
                 searchText="query"
-                onChange={() => jest.fn()}
-                onClick={onClickMock}
+                onChange={() => {}}
+                labels={{
+                    clearSearch: "Clear",
+                    filter: "Filter",
+                }}
+                testId="search-text-input"
             />,
         );
 
-        const dismissBtn = wrapper.find("IconButton");
+        const input = screen.getByTestId("search-text-input");
 
         // Act
-        dismissBtn.simulate("click");
-
-        wrapper.update();
+        rerender(
+            <SearchTextInput
+                searchText="query"
+                onChange={() => {}}
+                labels={{
+                    clearSearch: "Dismiss",
+                    filter: "Search",
+                }}
+                testId="search-text-input"
+            />,
+        );
 
         // Assert
-        expect(onClickMock).toHaveBeenCalled();
+        expect(input).toHaveAttribute("placeholder", "Search");
     });
 
-    it("labels should be updated by the parent component", () => {
+    test("button label should be updated by the parent component", () => {
         // Arrange
-        const wrapper = shallow(
+        const {rerender} = render(
             <SearchTextInput
                 searchText="query"
-                onChange={() => jest.fn()}
+                onChange={() => {}}
                 labels={{
                     clearSearch: "Clear",
                     filter: "Filter",
                 }}
+                testId="search-text-input"
             />,
         );
 
-        // Act
-        wrapper.setProps({labels: {clearSearch: "Dismiss", filter: "Search"}});
+        const clearIconButton = screen.queryByRole("button");
 
-        wrapper.update();
+        // Act
+        rerender(
+            <SearchTextInput
+                searchText="query"
+                onChange={() => {}}
+                labels={{
+                    clearSearch: "Dismiss",
+                    filter: "Search",
+                }}
+                testId="search-text-input"
+            />,
+        );
 
         // Assert
-        expect(wrapper).toHaveState({
-            labels: {clearSearch: "Dismiss", filter: "Search"},
-        });
+        expect(clearIconButton).toHaveAttribute("aria-label", "Dismiss");
     });
 });

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

@@ -2,17 +2,11 @@
 // A TextField with a search icon on its left side and X icon on its right side
 
 import * as React from "react";
-import {StyleSheet, css} from "aphrodite";
-
-import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
-import {View} from "@khanacademy/wonder-blocks-core";
-import IconButton from "@khanacademy/wonder-blocks-icon-button";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
-import Color from "@khanacademy/wonder-blocks-color";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+
+import SearchField from "@khanacademy/wonder-blocks-search-field";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import {defaultLabels, DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
+import {defaultLabels} from "../util/constants.js";
 
 type Labels = {|
     clearSearch: string,
@@ -57,22 +51,20 @@ 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 = {|
     labels: $PropertyType<Props, "labels">,
 |};
 
-type State = {|
-    focused: boolean,
-
-    /**
-     * The object containing the custom labels used inside this component.
-     */
-    labels: Labels,
-|};
-
-export default class SearchTextInput extends React.Component<Props, State> {
+export default class SearchTextInput extends React.Component<Props> {
     static isClassOf(instance: React.Element<any>): boolean {
         return (
             instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__
@@ -86,142 +78,38 @@ export default class SearchTextInput extends React.Component<Props, State> {
         },
     };
 
-    state: State = {
-        focused: false,
-        labels: {
-            clearSearch: defaultLabels.clearSearch,
-            filter: defaultLabels.filter,
-            ...this.props.labels,
-        },
-    };
-
-    componentDidUpdate(prevProps: Props) {
-        if (this.props.labels !== prevProps.labels) {
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({
-                labels: {...this.state.labels, ...this.props.labels},
-            });
+    // 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;
 
-    handleChange: (e: SyntheticInputEvent<>) => void = (e) => {
-        e.preventDefault();
-        this.props.onChange(e.target.value);
-    };
-
-    handleDismiss: () => void = () => {
-        const {onClick, onChange} = this.props;
-        // Empty the search text and focus the SearchTextInput
-        onChange("");
-        if (onClick) {
-            onClick();
-        }
-    };
-
-    handleBlur: (e: SyntheticInputEvent<>) => void = (e) => {
-        this.setState({focused: false});
-    };
-
-    handleFocus: (e: SyntheticInputEvent<>) => void = (e) => {
-        this.setState({focused: true});
-    };
-
-    maybeRenderDismissIconButton(): React.Node {
-        const {searchText} = this.props;
-        const {clearSearch} = this.state.labels;
-
-        if (searchText.length > 0) {
-            return (
-                <IconButton
-                    icon={icons.dismiss}
-                    kind="tertiary"
-                    onClick={this.handleDismiss}
-                    style={styles.dismissIcon}
-                    aria-label={clearSearch}
-                />
-            );
-        }
-        return null;
-    }
-
     render(): React.Node {
-        const {onClick, itemRef, searchText, style, testId} = this.props;
-        const {filter} = this.state.labels;
+        const {labels, onChange, onClick, itemRef, searchText, style, testId} =
+            this.props;
 
         return (
-            <View
+            <SearchField
+                clearAriaLabel={labels.clearSearch}
+                onChange={onChange}
                 onClick={onClick}
-                style={[
-                    styles.inputContainer,
-                    this.state.focused && styles.focused,
-                    style,
-                ]}
-            >
-                <Icon
-                    icon={icons.search}
-                    size="medium"
-                    color={Color.offBlack64}
-                    style={styles.searchIcon}
-                    aria-hidden="true"
-                />
-                <input
-                    type="text"
-                    onChange={this.handleChange}
-                    onFocus={this.handleFocus}
-                    onBlur={this.handleBlur}
-                    ref={itemRef}
-                    placeholder={filter}
-                    value={searchText}
-                    className={css(
-                        styles.inputStyleReset,
-                        typographyStyles.LabelMedium,
-                    )}
-                    data-test-id={testId}
-                />
-                {this.maybeRenderDismissIconButton()}
-            </View>
+                placeholder={labels.filter}
+                ref={itemRef}
+                style={style}
+                testId={testId}
+                value={searchText}
+            />
         );
     }
 }
-
-const styles = StyleSheet.create({
-    inputContainer: {
-        flexDirection: "row",
-        border: `1px solid ${Color.offBlack16}`,
-        borderRadius: Spacing.xxxSmall_4,
-        alignItems: "center",
-        // The height of the text input is 40 in design spec and we need to
-        // specify the height as well as minHeight to make sure the search text
-        // input takes enough height to render. (otherwise, it will get
-        // squashed)
-        height: DROPDOWN_ITEM_HEIGHT,
-        minHeight: DROPDOWN_ITEM_HEIGHT,
-    },
-    focused: {
-        border: `1px solid ${Color.blue}`,
-    },
-    searchIcon: {
-        marginLeft: Spacing.xSmall_8,
-        marginRight: Spacing.xSmall_8,
-    },
-    dismissIcon: {
-        margin: 0,
-        ":hover": {
-            border: "none",
-        },
-    },
-    inputStyleReset: {
-        display: "flex",
-        flex: 1,
-        background: "inherit",
-        border: "none",
-        outline: "none",
-        "::placeholder": {
-            color: Color.offBlack64,
-        },
-        width: "100%",
-        color: "inherit",
-    },
-});

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