diff --git a/.gitignore b/.gitignore index 56c7f17d..3abaf302 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,9 @@ storybook-static # Jetbrains IDEs .idea +# VS Code IDE +.vscode + .npmrc .DS_Store diff --git a/package.json b/package.json index 084b4256..ff74835b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sofarsounds/maestro", - "version": "7.4.19", + "version": "7.4.20", "description": "The official sofar sounds react uikit library", "main": "dist/index.js", "scripts": { diff --git a/src/hooks/useSelect/index.tsx b/src/hooks/useSelect/index.tsx index b514100a..2deb82a3 100644 --- a/src/hooks/useSelect/index.tsx +++ b/src/hooks/useSelect/index.tsx @@ -10,6 +10,8 @@ interface Props { filterBy?: (option: T, query: string) => boolean; defaultOptions: T[]; value?: T | null; + controlledInputValue?: string; + setControlledInputValue?: React.Dispatch>; } interface ReturnProps { @@ -33,12 +35,21 @@ const useSelect = ({ searchable, filterBy, value, - onChange + onChange, + controlledInputValue, + setControlledInputValue }: Props): ReturnProps => { const ref = useRef(); const [isOpen, setIsOpen] = useState(false); const [selected, setSelected] = useState(defaultValue); - const [inputValue, setInputValue] = useState(''); + const [uncontrolledInputValue, setUncontrolledInputValue] = useState(''); + + const inputValue = controlledInputValue + ? controlledInputValue + : uncontrolledInputValue; + const setInputValue = setControlledInputValue + ? setControlledInputValue + : setUncontrolledInputValue; const onOptionClick = useCallback( (option: T | null) => { diff --git a/src/molecules/Select/Options/index.tsx b/src/molecules/Select/Options/index.tsx index 9718d9e7..d0419a0e 100644 --- a/src/molecules/Select/Options/index.tsx +++ b/src/molecules/Select/Options/index.tsx @@ -94,7 +94,7 @@ const Options = ({ ); } case SelectState.ready: { - if (options.length === 0) { + if (options.length === 0 && userIsSearching) { return ( No options... diff --git a/src/molecules/Select/index.tsx b/src/molecules/Select/index.tsx index e1e2f919..2acb3b40 100644 --- a/src/molecules/Select/index.tsx +++ b/src/molecules/Select/index.tsx @@ -25,6 +25,8 @@ export interface SelectProps extends OptionsListProps { hasError?: boolean; invertColor?: boolean; renderLeftIcon?: React.ReactNode; + inputValue?: string; + setInputValue?: React.Dispatch>; // typeahead props searchable?: boolean; @@ -63,6 +65,8 @@ const Select = ({ initialWidth, state = SelectState.ready, disableScrollWhenOpen = false, + inputValue, + setInputValue, 'data-qaid': qaId }: SelectProps) => { const { @@ -81,7 +85,9 @@ const Select = ({ filterBy, defaultOptions, // @ts-ignore - onChange + onChange, + controlledInputValue: inputValue, + setControlledInputValue: setInputValue }); return (