diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js b/packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js index cbaae086e2..87d98cb5e2 100644 --- a/packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js +++ b/packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js @@ -96,6 +96,11 @@ storiesOf('Components|Inputs', module) option: dropdownValue, }; + const defaultValue = { + text: '', + options: [], + }; + return (
{ action('onChange')(event); if (event.target.name.endsWith('.textInput')) { diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx index 8e9b8cedec..1338e994b4 100644 --- a/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx +++ b/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx @@ -90,6 +90,10 @@ export type TSelectableSearchInputProps = { * Value of the input. Consists of text input and selected option. */ value: TValue; + /** + * Default value of the input. Consists of text input and selected option. + */ + defaultValue: TValue; /** * Called with the event of the input or dropdown when either the selectable dropdown or the text input have changed. * The change event from the text input has a suffix of `.textInput` and the change event from the dropdown has a suffix of `.dropdown`. @@ -254,7 +258,7 @@ const transformDataProps = (dataProps?: Record) => const SelectableSearchInput = (props: TSelectableSearchInputProps) => { const [dropdownHasFocus, toggleDropdownHasFocus] = useToggleState(false); - const [searchValue, setSearchValue] = useState(props.value.text || ''); + const [searchValue, setSearchValue] = useState(props.defaultValue.text || ''); const containerRef = useRef(null); const textInputRef = useRef(null); @@ -264,7 +268,9 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => { // Ensure input state is always updated when the input changes useEffect(() => { - setSearchValue(props.value.text); + if (props.value.text) { + setSearchValue(props.value.text); + } }, [props.value.text]); const optionsWithoutGroups = props.options.flatMap((option) => {