fix(react): correctly handle select field disabled state

p3ol · Sep 29, 2022 · 579dc2c · 579dc2c
1 parent 2b18843
commit 579dc2c
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 0 deletions.
diff --git a/packages/react/lib/SelectField/index.js b/packages/react/lib/SelectField/index.js
@@ -112,6 +112,10 @@ const SelectField = forwardRef(({
   }, searchThreshold, [state.search]);
 
   const onChange_ = ({ close = true, resetSearch = false } = {}) => {
+    if (disabled) {
+      return;
+    }
+
     dispatch({
       value: state.value,
       valid: state.valid,
@@ -205,6 +209,10 @@ const SelectField = forwardRef(({
   };
 
   const onToggle_ = ({ opened }) => {
+    if (disabled) {
+      return;
+    }
+
     state.opened = opened;
     dispatch({ opened });
 
@@ -363,6 +371,7 @@ const SelectField = forwardRef(({
       { ...rest }
       opened={state.opened}
       ref={dropdownRef}
+      disabled={disabled}
       clickOptions={{ toggle: false, keyboardHandlers: false }}
       className={classNames(
         'select-field',

diff --git a/packages/react/lib/SelectField/index.test.js b/packages/react/lib/SelectField/index.test.js
@@ -3,6 +3,9 @@ import { render, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { blur, reset } from '~test-utils';
+import FieldControl from '../FieldControl';
+import Label from '../Label';
+import Abstract from '../Abstract';
 import SelectField from './index';
 
 describe('<SelectField />', () => {
@@ -77,4 +80,51 @@ describe('<SelectField />', () => {
 
     unmount();
   });
+
+  it('should allow to be used with a FieldControl', async () => {
+    const user = userEvent.setup();
+    const { unmount, container, getByText } = render(
+      <FieldControl>
+        <Label htmlFor="name">Name</Label>
+        <SelectField
+          id="name"
+          placeholder="Name"
+          value="Marc"
+          onValidate={() => false}
+          options={['Marc', 'Linda']}
+        />
+        <Abstract>Enter your name</Abstract>
+      </FieldControl>
+    );
+
+    const input = container.querySelector('input');
+    await user.click(input);
+    await user.click(getByText('Linda'));
+
+    expect(container).toMatchSnapshot();
+    unmount();
+  });
+
+  it('should not allow to change value when disabled', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    const { unmount, container, queryByText } = render(
+      <SelectField
+        value="Marc"
+        options={['Marc', 'Linda']}
+        onChange={onChange}
+        disabled
+      />
+    );
+
+    const input = container.querySelector('input');
+    await user.click(input);
+
+    expect(queryByText('Linda')).toBeFalsy();
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(container).toMatchSnapshot();
+
+    unmount();
+  });
 });
diff --git a/packages/react/lib/SelectField/index.test.js.snap b/packages/react/lib/SelectField/index.test.js.snap
@@ -1,5 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<SelectField /> should allow to be used with a FieldControl 1`] = `
+<div>
+  <label
+    class="junipero label invalid"
+    for="name"
+  >
+    Name
+  </label>
+  <div
+    class="junipero dropdown select-field dirty invalid"
+    id="name"
+  >
+    <div
+      class="field dropdown-toggle"
+    >
+      <input
+        readonly=""
+        type="text"
+        value="Linda"
+      />
+      <div
+        class="icons"
+      >
+        <svg
+          class="junipero icon remove"
+          height="10"
+          viewBox="0 0 9 10"
+          width="10"
+        >
+          <path
+            d="M8 1.5L1 8.5"
+          />
+          <path
+            d="M1 1.5L8 8.5"
+          />
+        </svg>
+        <svg
+          class="junipero icon arrows"
+          height="13"
+          viewBox="0 0 8 13"
+          width="8"
+        >
+          <path
+            d="M1 4.5L4 1.5L7 4.5"
+          />
+          <path
+            d="M1 8.5L4 11.5L7 8.5"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div
+    class="junipero abstract invalid"
+  >
+    Enter your name
+  </div>
+</div>
+`;
+
 exports[`<SelectField /> should allow to reset the field 1`] = `
 <div>
   <div
@@ -144,6 +204,54 @@ exports[`<SelectField /> should be invalid if validation fails 1`] = `
 </div>
 `;
 
+exports[`<SelectField /> should not allow to change value when disabled 1`] = `
+<div>
+  <div
+    class="junipero dropdown disabled select-field pristine valid"
+  >
+    <div
+      class="field dropdown-toggle"
+    >
+      <input
+        readonly=""
+        type="text"
+        value="Marc"
+      />
+      <div
+        class="icons"
+      >
+        <svg
+          class="junipero icon remove"
+          height="10"
+          viewBox="0 0 9 10"
+          width="10"
+        >
+          <path
+            d="M8 1.5L1 8.5"
+          />
+          <path
+            d="M1 1.5L8 8.5"
+          />
+        </svg>
+        <svg
+          class="junipero icon arrows"
+          height="13"
+          viewBox="0 0 8 13"
+          width="8"
+        >
+          <path
+            d="M1 4.5L4 1.5L7 4.5"
+          />
+          <path
+            d="M1 8.5L4 11.5L7 8.5"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<SelectField /> should render 1`] = `
 <div>
   <div