Do not clear input value on focus

Author: tnagorra

.github/workflows/chromatic.yml

@@ -12,6 +12,9 @@ jobs:
     runs-on: ubuntu-latest
     # the list of steps that the action will go through
     steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.20.0'
       - uses: actions/checkout@v1
       - run: yarn
       #- run: yarn build-storybook

package.json

@@ -19,7 +19,7 @@
         "watch": "rollup -c -w",
         "typecheck": "tsc",
         "lint": "eslint --rule 'import/no-unresolved: 0' 'src/**/*.[tj]s?(x)'",
-        "storybook": "start-storybook -p 6006",
+        "storybook": "export SET NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
         "build-storybook": "build-storybook"
     },
     "repository": {

src/components/MultiSelectInput/SearchMultiSelectInput.tsx

@@ -75,8 +75,6 @@ export type SearchMultiSelectInputProps<
         | 'onSearchTextChange'
         | 'dropdownShown'
         | 'onDropdownShownChange'
-        | 'focused'
-        | 'onFocusedChange'
         | 'focusedKey'
         | 'onFocusedKeyChange'
         | 'hasValue'
@@ -298,8 +296,6 @@ function SearchMultiSelectInput<
             onSearchTextChange={handleSearchValueChange}
             dropdownShown={showDropdown}
             onDropdownShownChange={handleChangeDropdown}
-            focused={focused}
-            onFocusedChange={setFocused}
             focusedKey={focusedKey}
             onFocusedKeyChange={setFocusedKey}
             persistentOptionPopup

src/components/RawTextArea/index.tsx

@@ -84,7 +84,7 @@ function RawTextArea<K extends string>(
             value={value ?? ''}
             autoComplete="off"
             style={style as React.ComponentProps<typeof TextareaAutosize>['style']}
-            disabled={disabled || readOnly}
+            disabled={disabled}
             readOnly={readOnly}
             minRows={3}
             maxRows={10}

src/components/SelectInput/SearchSelectInput.tsx

@@ -72,8 +72,6 @@ export type SearchSelectInputProps<
         | 'onSearchTextChange'
         | 'dropdownShown'
         | 'onDropdownShownChange'
-        | 'focused'
-        | 'onFocusedChange'
         | 'focusedKey'
         | 'onFocusedKeyChange'
         | 'hasValue'
@@ -259,7 +257,8 @@ function SearchSelectInput<
     const handleClear = useCallback(
         () => {
             if (!props.nonClearable) {
-                props.onChange(undefined, name, undefined);
+                const onChangeFromProps = props.onChange;
+                onChangeFromProps(undefined, name, undefined);
             }
         },
         // eslint-disable-next-line react/destructuring-assignment
@@ -284,8 +283,6 @@ function SearchSelectInput<
             onSearchTextChange={handleSearchValueChange}
             dropdownShown={showDropdown}
             onDropdownShownChange={handleChangeDropdown}
-            focused={focused}
-            onFocusedChange={setFocused}
             focusedKey={focusedKey}
             onFocusedKeyChange={setFocusedKey}
             hasValue={isDefined(value)}

src/components/SelectInputContainer/index.tsx

@@ -53,8 +53,6 @@ export type SelectInputContainerProps<
     onOptionClick: (optionKey: OK, option: O, name: N) => void;
     dropdownShown: boolean;
     onDropdownShownChange: (value: boolean) => void;
-    focused: boolean;
-    onFocusedChange: (value: boolean) => void;
     focusedKey: { key: OK, mouse?: boolean } | undefined;
     onFocusedKeyChange: (value: { key: OK, mouse?: boolean } | undefined) => void;
     searchText: string;
@@ -126,10 +124,8 @@ function SelectInputContainer<OK extends OptionKey, N extends string, O extends
         onClear,
         optionsPending,
         optionsFiltered,
-        focused,
         focusedKey,
         onFocusedKeyChange,
-        onFocusedChange,
         dropdownShown,
         onDropdownShownChange,
         totalOptionsCount,
@@ -350,11 +346,9 @@ function SelectInputContainer<OK extends OptionKey, N extends string, O extends
                         readOnly={readOnly}
                         uiMode={uiMode}
                         disabled={disabled}
-                        value={(dropdownShown || focused) ? searchText : valueDisplay}
+                        value={dropdownShown ? searchText : valueDisplay}
                         onChange={handleSearchInputChange}
                         onClick={handleSearchInputClick}
-                        onFocus={() => onFocusedChange(true)}
-                        onBlur={() => onFocusedChange(false)}
                         placeholder={isTruthyString(valueDisplay) ? valueDisplay : placeholder}
                         autoComplete="off"
                         onKeyDown={handleKeyDown}