Selected fields can't be blured by tab (#65) thanks to @gandalf92

* * Disable inputs and set tabindex of parent container to 0 if select is disabled. * * Updated snapshots and added various tests for input. and index.spec * * Stop events from bubbeling and set tabindex of dropdown-input to -1 * * Updated tests an snapshots
sanusart · Jan 23, 2020 · 819bb5a · 819bb5a
1 parent 490bd59
commit 819bb5a
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 12 deletions.
diff --git a/__tests__/__snapshots__/index.spec.js.snap b/__tests__/__snapshots__/index.spec.js.snap
@@ -111,6 +111,7 @@ exports[`<Select/> component <Select/> is disabled 1`] = `
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}
+        onFocus={[Function]}
         onKeyPress={[Function]}
         placeholder="Select..."
         readOnly={false}
@@ -249,6 +250,7 @@ exports[`<Select/> component <Select/> renders correctly 1`] = `
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}
+        onFocus={[Function]}
         onKeyPress={[Function]}
         placeholder="Select..."
         readOnly={false}
@@ -401,6 +403,7 @@ exports[`<Select/> component <Select/> renders with clearable 1`] = `
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}
+        onFocus={[Function]}
         onKeyPress={[Function]}
         placeholder="Select..."
         readOnly={false}
@@ -568,6 +571,7 @@ exports[`<Select/> component <Select/> renders with loading 1`] = `
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}
+        onFocus={[Function]}
         onKeyPress={[Function]}
         placeholder="Select..."
         readOnly={false}
@@ -710,6 +714,7 @@ exports[`<Select/> component <Select/> renders with name 1`] = `
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}
+        onFocus={[Function]}
         onKeyPress={[Function]}
         placeholder="Select..."
         readOnly={false}
@@ -730,6 +735,7 @@ exports[`<Select/> component <Select/> renders with name 1`] = `
           "width": 0,
         }
       }
+      tabIndex={-1}
       value={Array []}
     />
     <div
@@ -869,6 +875,7 @@ exports[`<Select/> component <Select/> renders with separator 1`] = `
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}
+        onFocus={[Function]}
         onKeyPress={[Function]}
         placeholder="Select..."
         readOnly={false}

diff --git a/__tests__/components/Content.spec.js b/__tests__/components/Content.spec.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
+import { unmountComponentAtNode, render } from 'react-dom';
+import { act } from 'react-dom/test-utils';
 
 import Content from '../../src/components/Content';
 import { options } from '../options';
 
-let spy;
+let container = null;
 
 const props = (props = {}) => ({
   props: {
@@ -17,19 +19,22 @@ const props = (props = {}) => ({
     values: [options[0]]
   },
   methods: {
-    dropDown: () => undefined,
-    getInputSize: () => undefined,
+    dropDown: jest.fn(),
+    getInputSize: () => undefined
   },
   ...props
 });
 
 describe('<Clear/> component', () => {
   beforeEach(() => {
-    spy = jest.fn();
+    container = document.createElement('div');
+    document.body.appendChild(container);
   });
 
   afterEach(() => {
-    spy = null;
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
   });
 
   it('<Content/> renders correctly', () => {
@@ -39,10 +44,20 @@ describe('<Clear/> component', () => {
   });
 
   it('onClick opens dropdown', () => {
-    TestRenderer.create(
-      <Content {...props()} onClick={spy}/>)
-      .root.findByProps({ className: 'react-dropdown-select-content react-dropdown-select-type-multi' }).props.onClick();
+    const componentProps = props();
 
-    expect(spy).toHaveBeenCalled;
+    act(() => {
+      render(<Content {...componentProps}/>, container);
+    });
+
+    const content = document.querySelector('.react-dropdown-select-content');
+
+    expect(componentProps.methods.dropDown).toHaveBeenCalledTimes(0);
+
+    act(() => {
+      content.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(componentProps.methods.dropDown).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/__tests__/components/__snapshots__/Content.spec.js.snap b/__tests__/components/__snapshots__/Content.spec.js.snap
@@ -86,6 +86,7 @@ exports[`<Clear/> component <Content/> renders correctly 1`] = `
     className="react-dropdown-select-input emotion-2 emotion-3"
     onBlur={[Function]}
     onClick={[Function]}
+    onFocus={[Function]}
     onKeyPress={[Function]}
     placeholder=""
     readOnly={true}

diff --git a/__tests__/components/__snapshots__/Input.spec.js.snap b/__tests__/components/__snapshots__/Input.spec.js.snap
@@ -18,6 +18,7 @@ exports[`<Input/> is disabled 1`] = `
   className="react-dropdown-select-input emotion-0 emotion-1"
   onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
   onKeyPress={[Function]}
   placeholder=""
   readOnly={false}
@@ -43,6 +44,7 @@ exports[`<Input/> renders correctly 1`] = `
   className="react-dropdown-select-input emotion-0 emotion-1"
   onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
   onKeyPress={[Function]}
   placeholder=""
   readOnly={false}

diff --git a/src/components/Content.js b/src/components/Content.js
@@ -12,7 +12,10 @@ const Content = ({ props, state, methods }) => {
       className={`${LIB_NAME}-content ${
         props.multi ? `${LIB_NAME}-type-multi` : `${LIB_NAME}-type-single`
       }`}
-      onClick={() => methods.dropDown('open')}>
+      onClick={(event) => {
+        event.stopPropagation();
+        methods.dropDown('open');
+      }}>
       {props.contentRenderer ? (
         props.contentRenderer({ props, state, methods })
       ) : (

diff --git a/src/components/Input.js b/src/components/Input.js
@@ -36,11 +36,12 @@ class Input extends Component {
     }
 
     if (prevProps.state.dropdown !== this.props.state.dropdown && !this.props.state.dropdown) {
-      this.input.current.blur();
+       this.input.current.blur();
     }
   }
 
-  onBlur = () => {
+  onBlur = (event) => {
+    event.stopPropagation();
     if (!this.props.state.dropdown) {
       return this.input.current.blur();
     }
@@ -72,6 +73,7 @@ class Input extends Component {
       <InputComponent
         ref={this.input}
         tabIndex="-1"
+        onFocus={(event) => event.stopPropagation()}
         className={`${LIB_NAME}-input`}
         size={methods.getInputSize()}
         value={state.search}

diff --git a/src/index.js b/src/index.js
@@ -460,6 +460,7 @@ export class Select extends Component {
 
           {(this.props.name || this.props.required) && (
             <input
+              tabIndex={-1}
               style={{ opacity: 0, width: 0, position: 'absolute' }}
               name={this.props.name}
               required={this.props.required}