Merge pull request #1 from Ryzoo/master

Added possibility to focus search on start.

Author: harshzalavadiya

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
 

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",

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;

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
           }}

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 && (
         <SelectSearchContainer>
           <input
+            autoFocus={focusSearchOnOpen}
             placeholder={getString("search", overrideStrings)}
             type="text"
             aria-describedby={getString("search", overrideStrings)}

src/stories/default.stories.tsx

@@ -24,6 +24,7 @@ export const toStorybook = () => {
       <pre>{JSON.stringify(selected)}</pre>
       <MultiSelect
         options={options}
+        focusSearchOnOpen={boolean("focusSearchOnOpen", true)}
         hasSelectAll={boolean("hasSelectAll", true)}
         isLoading={boolean("isLoading", false)}
         shouldToggleOnHover={boolean("shouldToggleOnHover", false)}