diff --git a/README.md b/README.md index 54e1119..1ebff63 100644 --- a/README.md +++ b/README.md @@ -56,21 +56,22 @@ export default App; ## 👀 Props -| Prop | Description | Type | Default | -| --------------------- | --------------------------------- | ------------------ | ------- | -| `labelledBy` | value for `aria-labelledby` | `string` | | -| `options` | options for dropdown | `[{label, value}]` | | -| `value` | pre-selected rows | `[{label, value}]` | `[]` | -| `hasSelectAll` | toggle 'Select All' option | `boolean` | `true` | -| `isLoading` | show spinner on select | `boolean` | `false` | -| `shouldToggleOnHover` | toggle dropdown on hover option | `boolean` | `false` | -| `overrideStrings` | Override default strings for i18n | `object` | | -| `onChange` | onChhange callback | `function` | | -| `disabled` | disable dropdown | `boolean` | `false` | -| `selectAllLabel` | _select all_ label | `string` | | -| `disableSearch` | hide search textbox | `boolean` | `false` | -| `filterOptions` | custom filter options | `function` | | -| `theme` | theme variables | `object` | | +| Prop | Description | Type | Default | +| --------------------- | ---------------------------------- | ------------------ | ------- | +| `labelledBy` | value for `aria-labelledby` | `string` | | +| `options` | options for dropdown | `[{label, value}]` | | +| `value` | pre-selected rows | `[{label, value}]` | `[]` | +| `focusSearchOnOpen` | focus on search input when opening | `boolean` | `true` | +| `hasSelectAll` | toggle 'Select All' option | `boolean` | `true` | +| `isLoading` | show spinner on select | `boolean` | `false` | +| `shouldToggleOnHover` | toggle dropdown on hover option | `boolean` | `false` | +| `overrideStrings` | Override default strings for i18n | `object` | | +| `onChange` | onChhange callback | `function` | | +| `disabled` | disable dropdown | `boolean` | `false` | +| `selectAllLabel` | _select all_ label | `string` | | +| `disableSearch` | hide search textbox | `boolean` | `false` | +| `filterOptions` | custom filter options | `function` | | +| `theme` | theme variables | `object` | | ## 🌐 Internationalization diff --git a/package.json b/package.json index 9415653..c581533 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-multi-select-component", - "version": "1.3.2", + "version": "1.3.3", "description": "Simple multiple selection dropdown component with checkboxes, search and select-al`", "author": "harshzalavadiya", "license": "MIT", @@ -19,10 +19,10 @@ "build-storybook": "build-storybook" }, "dependencies": { - "@emotion/core": "^10.0.22", - "@emotion/styled": "^10.0.23", + "@emotion/core": "^10.0.28", + "@emotion/styled": "^10.0.27", "@rooks/use-outside-click": "^3.4.1", - "emotion-theming": "^10.0.19" + "emotion-theming": "^10.0.27" }, "peerDependencies": { "react": "^16.12.0", @@ -34,20 +34,20 @@ "@storybook/addon-links": "^5.2.6", "@storybook/addons": "^5.2.6", "@storybook/react": "^5.2.6", - "@types/react": "^16.9.13", - "@types/react-dom": "^16.9.4", + "@types/react": "^16.9.23", + "@types/react-dom": "^16.9.5", "awesome-typescript-loader": "^5.2.1", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-runtime": "^6.26.0", "react": "^16.4.1", "react-dom": "^16.4.1", - "react-scripts-ts": "^3.1.0", + "react-scripts-ts": "^4.0.8", "rollup": "^1.27.5", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-node-resolve": "^5.2.0", - "rollup-plugin-peer-deps-external": "^2.2.0", + "rollup-plugin-peer-deps-external": "^2.2.2", "rollup-plugin-postcss": "^2.0.3", "rollup-plugin-typescript2": "^0.25.2", "rollup-plugin-url": "^3.0.1", diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index 5d5d4e2..0971aa7 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -22,6 +22,7 @@ export interface IStyledProps { export interface ISelectProps { options: Option[]; value: Option[]; + focusSearchOnOpen?: boolean; onChange?; valueRenderer?: (selected: Option[], options: Option[]) => string; ItemRenderer?: Function; diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx index d8a2db3..579fa6a 100644 --- a/src/multi-select/index.tsx +++ b/src/multi-select/index.tsx @@ -15,6 +15,7 @@ const MultiSelectBox = styled.div` `; const MultiSelect = ({ + focusSearchOnOpen = true, hasSelectAll = true, shouldToggleOnHover = false, options, @@ -48,6 +49,7 @@ const MultiSelect = ({ onChange, disabled, disableSearch, + focusSearchOnOpen, filterOptions, overrideStrings }} diff --git a/src/select-panel/index.tsx b/src/select-panel/index.tsx index 539e0f0..42c461b 100644 --- a/src/select-panel/index.tsx +++ b/src/select-panel/index.tsx @@ -16,6 +16,7 @@ interface ISelectPanelProps { ItemRenderer?: Function; options: Option[]; value: Option[]; + focusSearchOnOpen: boolean; selectAllLabel?: string; onChange: (selected: Option[]) => void; disabled?: boolean; @@ -25,6 +26,11 @@ interface ISelectPanelProps { overrideStrings?: { [key: string]: string }; } +enum FocusType { + SEARCH = -1, + NONE, +} + const SelectSearchContainer = styled.div` width: 100%; border-bottom: 1px solid ${(props: any) => props.theme.border}; @@ -47,11 +53,12 @@ export const SelectPanel = (props: ISelectPanelProps) => { ItemRenderer, disabled, disableSearch, + focusSearchOnOpen, hasSelectAll, overrideStrings } = props; const [searchText, setSearchText] = useState(""); - const [focusIndex, setFocusIndex] = useState(0); + const [focusIndex, setFocusIndex] = useState(focusSearchOnOpen ? FocusType.SEARCH : FocusType.NONE); const selectAllOption = { label: selectAllLabel || getString("selectAll", overrideStrings), @@ -67,7 +74,7 @@ export const SelectPanel = (props: ISelectPanelProps) => { const handleSearchChange = e => { setSearchText(e.target.value); - setFocusIndex(-1); + setFocusIndex(FocusType.SEARCH); }; const handleItemClicked = (index: number) => setFocusIndex(index); @@ -78,7 +85,7 @@ export const SelectPanel = (props: ISelectPanelProps) => { if (e.altKey) { return; } - updateFocus(-1); + updateFocus(FocusType.SEARCH); break; case 40: // Down Arrow if (e.altKey) { @@ -94,7 +101,7 @@ export const SelectPanel = (props: ISelectPanelProps) => { }; const handleSearchFocus = () => { - setFocusIndex(-1); + setFocusIndex(FocusType.SEARCH); }; const allAreSelected = () => options.length === value.length; @@ -116,6 +123,7 @@ export const SelectPanel = (props: ISelectPanelProps) => { {!disableSearch && ( { 
{JSON.stringify(selected)}