Fixed readOnly in BoolField, RadioField and SelectField (#674).

vazco · Dec 4, 2020 · 0e26a21 · 0e26a21
1 parent d2dda72
commit 0e26a21
Show file tree

Hide file tree

Showing 31 changed files with 66 additions and 181 deletions.
diff --git a/packages/uniforms-antd/src/BoolField.tsx b/packages/uniforms-antd/src/BoolField.tsx
@@ -27,6 +27,7 @@ function Bool({
   inputRef,
   name,
   onChange,
+  readOnly,
   unCheckedChildren = <CloseOutlined />,
   value,
   ...props
@@ -39,7 +40,7 @@ function Bool({
       checkedChildren={checkedChildren}
       disabled={disabled}
       name={name}
-      onChange={() => onChange(!value)}
+      onChange={() => (readOnly ? undefined : onChange(!value))}
       ref={inputRef}
       unCheckedChildren={unCheckedChildren}
       {...filterDOMProps(props)}

diff --git a/packages/uniforms-antd/src/RadioField.tsx b/packages/uniforms-antd/src/RadioField.tsx
@@ -18,7 +18,9 @@ function Radio(props: RadioFieldProps) {
     <RadioAntD.Group
       disabled={props.disabled}
       name={props.name}
-      onChange={event => props.onChange(event.target.value)}
+      onChange={event =>
+        props.readOnly ? undefined : props.onChange(event.target.value)
+      }
       value={props.value ?? ''}
       {...filterDOMProps(props)}
     >

diff --git a/packages/uniforms-antd/src/SelectField.tsx b/packages/uniforms-antd/src/SelectField.tsx
@@ -47,7 +47,9 @@ function Select(props: SelectFieldProps) {
         disabled={props.disabled}
         name={props.name}
         onChange={
-          props.fieldType === Array
+          props.readOnly
+            ? undefined
+            : props.fieldType === Array
             ? // FIXME: Argument type depends on `props.fieldType`.
               (value: any) => props.onChange(value)
             : (event: any) => props.onChange(event.target.value)
@@ -67,7 +69,7 @@ function Select(props: SelectFieldProps) {
         mode={props.fieldType === Array ? 'multiple' : undefined}
         // @ts-ignore: There's no `name` property on Select?
         name={props.name}
-        onChange={value => props.onChange(value)}
+        onChange={value => (props.readOnly ? undefined : props.onChange(value))}
         placeholder={props.placeholder}
         ref={props.inputRef}
         value={

diff --git a/packages/uniforms-bootstrap3/__tests__/BoolField.tsx b/packages/uniforms-bootstrap3/__tests__/BoolField.tsx
@@ -59,14 +59,6 @@ test('<BoolField> - renders an input with correct disabled state', () => {
   expect(wrapper.find('input').prop('disabled')).toBe(true);
 });
 
-test('<BoolField> - renders an input with correct readOnly state', () => {
-  const element = <BoolField name="x" readOnly />;
-  const wrapper = mount(element, createContext({ x: { type: Boolean } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('readOnly')).toBe(true);
-});
-
 test('<BoolField> - renders a input with correct label (specified)', () => {
   const element = <BoolField name="x" label="BoolFieldLabel" />;
   const wrapper = mount(element, createContext({ x: { type: Boolean } }));

diff --git a/packages/uniforms-bootstrap3/__tests__/RadioField.tsx b/packages/uniforms-bootstrap3/__tests__/RadioField.tsx
@@ -37,18 +37,6 @@ test('<RadioField> - renders a set of checkboxes with correct disabled state', (
   expect(wrapper.find('input').at(1).prop('disabled')).toBe(true);
 });
 
-test('<RadioField> - renders a set of checkboxes with correct readOnly state', () => {
-  const element = <RadioField name="x" readOnly />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String, allowedValues: ['a', 'b'] } }),
-  );
-
-  expect(wrapper.find('input')).toHaveLength(2);
-  expect(wrapper.find('input').at(0).prop('readOnly')).toBe(true);
-  expect(wrapper.find('input').at(1).prop('readOnly')).toBe(true);
-});
-
 test('<RadioField> - renders a set of checkboxes with correct id (inherited)', () => {
   const element = <RadioField name="x" />;
   const wrapper = mount(

diff --git a/packages/uniforms-bootstrap3/__tests__/SelectField.tsx b/packages/uniforms-bootstrap3/__tests__/SelectField.tsx
@@ -315,18 +315,6 @@ test('<SelectField checkboxes> - renders a set of checkboxes with correct disabl
   expect(wrapper.find('input').at(1).prop('disabled')).toBe(true);
 });
 
-test('<SelectField checkboxes> - renders a set of checkboxes with correct readOnly state', () => {
-  const element = <SelectField checkboxes name="x" readOnly />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String, allowedValues: ['a', 'b'] } }),
-  );
-
-  expect(wrapper.find('input')).toHaveLength(2);
-  expect(wrapper.find('input').at(0).prop('readOnly')).toBe(true);
-  expect(wrapper.find('input').at(1).prop('readOnly')).toBe(true);
-});
-
 test('<SelectField checkboxes> - renders a set of checkboxes with correct id (inherited)', () => {
   const element = <SelectField checkboxes name="x" />;
   const wrapper = mount(

diff --git a/packages/uniforms-bootstrap3/src/BoolField.tsx b/packages/uniforms-bootstrap3/src/BoolField.tsx
@@ -42,8 +42,7 @@ function Bool(props: BoolFieldProps) {
           disabled={disabled}
           id={props.id}
           name={name}
-          onChange={() => onChange(!value)}
-          readOnly={readOnly}
+          onChange={() => (readOnly ? undefined : onChange(!value))}
           ref={props.inputRef}
           type="checkbox"
         />

diff --git a/packages/uniforms-bootstrap3/src/RadioField.tsx b/packages/uniforms-bootstrap3/src/RadioField.tsx
@@ -38,8 +38,7 @@ function Radio(props: RadioFieldProps) {
             disabled={props.disabled}
             id={`${props.id}-${escape(item)}`}
             name={props.name}
-            onChange={() => props.onChange(item)}
-            readOnly={props.readOnly}
+            onChange={() => (props.readOnly ? undefined : props.onChange(item))}
             type="radio"
           />
           {props.transform ? props.transform(item) : item}

diff --git a/packages/uniforms-bootstrap3/src/SelectField.tsx b/packages/uniforms-bootstrap3/src/SelectField.tsx
@@ -69,9 +69,10 @@ function Select({
               id={`${id}-${escape(item)}`}
               name={name}
               onChange={() =>
-                onChange(fieldType === Array ? xor([item], value) : item)
+                readOnly
+                  ? undefined
+                  : onChange(fieldType === Array ? xor([item], value) : item)
               }
-              readOnly={readOnly}
               type="checkbox"
             />
             {transform ? transform(item) : item}
@@ -87,7 +88,11 @@ function Select({
         id={id}
         name={name}
         onChange={event =>
-          onChange(event.target.value !== '' ? event.target.value : undefined)
+          readOnly
+            ? undefined
+            : onChange(
+                event.target.value !== '' ? event.target.value : undefined,
+              )
         }
         ref={inputRef}
         value={value ?? ''}

diff --git a/packages/uniforms-bootstrap4/__tests__/BoolField.tsx b/packages/uniforms-bootstrap4/__tests__/BoolField.tsx
@@ -60,14 +60,6 @@ test('<BoolField> - renders an input with correct disabled state', () => {
   expect(wrapper.find('input').prop('disabled')).toBe(true);
 });
 
-test('<BoolField> - renders an input with correct readOnly state', () => {
-  const element = <BoolField name="x" readOnly />;
-  const wrapper = mount(element, createContext({ x: { type: Boolean } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('readOnly')).toBe(true);
-});
-
 test('<BoolField> - renders a input with correct label (specified)', () => {
   const element = <BoolField name="x" label="BoolFieldLabel" />;
   const wrapper = mount(element, createContext({ x: { type: Boolean } }));

diff --git a/packages/uniforms-bootstrap4/__tests__/RadioField.tsx b/packages/uniforms-bootstrap4/__tests__/RadioField.tsx
@@ -38,18 +38,6 @@ test('<RadioField> - renders a set of checkboxes with correct disabled state', (
   expect(wrapper.find('input').at(1).prop('disabled')).toBe(true);
 });
 
-test('<RadioField> - renders a set of checkboxes with correct readOnly state', () => {
-  const element = <RadioField name="x" readOnly />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String, allowedValues: ['a', 'b'] } }),
-  );
-
-  expect(wrapper.find('input')).toHaveLength(2);
-  expect(wrapper.find('input').at(0).prop('readOnly')).toBe(true);
-  expect(wrapper.find('input').at(1).prop('readOnly')).toBe(true);
-});
-
 test('<RadioField> - renders a set of checkboxes with correct id (inherited)', () => {
   const element = <RadioField name="x" />;
   const wrapper = mount(

diff --git a/packages/uniforms-bootstrap4/__tests__/SelectField.tsx b/packages/uniforms-bootstrap4/__tests__/SelectField.tsx
@@ -358,18 +358,6 @@ test('<SelectField checkboxes> - renders a set of checkboxes with correct disabl
   expect(wrapper.find('input').at(1).prop('disabled')).toBe(true);
 });
 
-test('<SelectField checkboxes> - renders a set of checkboxes with correct readOnly state', () => {
-  const element = <SelectField checkboxes name="x" readOnly />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String, allowedValues: ['a', 'b'] } }),
-  );
-
-  expect(wrapper.find('input')).toHaveLength(2);
-  expect(wrapper.find('input').at(0).prop('readOnly')).toBe(true);
-  expect(wrapper.find('input').at(1).prop('readOnly')).toBe(true);
-});
-
 test('<SelectField checkboxes> - renders a set of checkboxes with correct id (inherited)', () => {
   const element = <SelectField checkboxes name="x" />;
   const wrapper = mount(

diff --git a/packages/uniforms-bootstrap4/src/BoolField.tsx b/packages/uniforms-bootstrap4/src/BoolField.tsx
@@ -43,8 +43,7 @@ function Bool({ onChange, ...props }: BoolFieldProps) {
           disabled={disabled}
           id={props.id}
           name={name}
-          onChange={() => onChange(!value)}
-          readOnly={readOnly}
+          onChange={() => (readOnly ? undefined : onChange(!value))}
           ref={inputRef}
           type="checkbox"
         />

diff --git a/packages/uniforms-bootstrap4/src/RadioField.tsx b/packages/uniforms-bootstrap4/src/RadioField.tsx
@@ -42,8 +42,7 @@ function Radio(props: RadioFieldProps) {
             disabled={props.disabled}
             id={`${props.id}-${escape(item)}`}
             name={props.name}
-            onChange={() => props.onChange(item)}
-            readOnly={props.readOnly}
+            onChange={() => (props.readOnly ? undefined : props.onChange(item))}
             type="radio"
           />{' '}
           {props.transform ? props.transform(item) : item}

diff --git a/packages/uniforms-bootstrap4/src/SelectField.tsx b/packages/uniforms-bootstrap4/src/SelectField.tsx
@@ -73,9 +73,10 @@ function Select({
               id={`${id}-${escape(item)}`}
               name={name}
               onChange={() =>
-                onChange(fieldType === Array ? xor([item], value) : item)
+                readOnly
+                  ? undefined
+                  : onChange(fieldType === Array ? xor([item], value) : item)
               }
-              readOnly={readOnly}
               type="checkbox"
             />
             {transform ? transform(item) : item}
@@ -91,7 +92,11 @@ function Select({
         id={id}
         name={name}
         onChange={event =>
-          onChange(event.target.value !== '' ? event.target.value : undefined)
+          readOnly
+            ? undefined
+            : onChange(
+                event.target.value !== '' ? event.target.value : undefined,
+              )
         }
         ref={inputRef}
         value={value ?? ''}

diff --git a/packages/uniforms-material/__tests__/SelectField.tsx b/packages/uniforms-material/__tests__/SelectField.tsx
@@ -344,20 +344,6 @@ test('<SelectField checkboxes> - renders a set of Radio buttons with correct dis
   expect(wrapper.find(Radio).at(1).prop('disabled')).toBe(true);
 });
 
-test('<SelectField checkboxes> - renders a set of Radio buttons with correct readOnly state', () => {
-  const element = (
-    <SelectField checkboxes name="x" inputProps={{ readOnly: true }} />
-  );
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String, allowedValues: ['a', 'b'] } }),
-  );
-
-  expect(wrapper.find(Radio)).toHaveLength(2);
-  expect(wrapper.find(Radio).at(0).prop('inputProps')!.readOnly).toBe(true);
-  expect(wrapper.find(Radio).at(1).prop('inputProps')!.readOnly).toBe(true);
-});
-
 test('<SelectField checkboxes> - renders a set of Radio buttons with correct id (inherited)', () => {
   const element = <SelectField checkboxes name="x" />;
   const wrapper = mount(

diff --git a/packages/uniforms-material/src/BoolField.tsx b/packages/uniforms-material/src/BoolField.tsx
@@ -28,6 +28,7 @@ function Bool(props: BoolFieldProps) {
     legend,
     name,
     onChange,
+    readOnly,
     transform,
     value,
   } = props;
@@ -49,7 +50,10 @@ function Bool(props: BoolFieldProps) {
             checked={!!value}
             name={name}
             onChange={event =>
-              !disabled && onChange && onChange(event.target.checked)
+              !disabled &&
+              !readOnly &&
+              onChange &&
+              onChange(event.target.checked)
             }
             ref={inputRef as Ref<HTMLButtonElement>}
             value={name}

diff --git a/packages/uniforms-material/src/RadioField.tsx b/packages/uniforms-material/src/RadioField.tsx
@@ -31,6 +31,7 @@ function Radio({
   margin = 'dense',
   name,
   onChange,
+  readOnly,
   transform,
   value,
   ...props
@@ -47,7 +48,9 @@ function Radio({
     <RadioGroup
       id={id}
       name={name}
-      onChange={(event: any) => disabled || onChange(event.target.value)}
+      onChange={(event: any) =>
+        disabled || readOnly || onChange(event.target.value)
+      }
       ref={inputRef}
       value={value ?? ''}
     >

diff --git a/packages/uniforms-material/src/SelectField.tsx b/packages/uniforms-material/src/SelectField.tsx
@@ -69,6 +69,7 @@ function Select(props: SelectFieldProps) {
       legend,
       name,
       onChange,
+      readOnly,
       transform,
     } = props;
 
@@ -81,7 +82,9 @@ function Select(props: SelectFieldProps) {
         <RadioGroup
           id={id}
           name={name}
-          onChange={event => disabled || onChange(event.target.value)}
+          onChange={event =>
+            disabled || readOnly || onChange(event.target.value)
+          }
           ref={inputRef}
           value={value ?? ''}
         >
@@ -106,7 +109,9 @@ function Select(props: SelectFieldProps) {
                   checked={value.includes(item)}
                   id={`${id}-${escape(item)}`}
                   name={name}
-                  onChange={() => disabled || onChange(xor([item], value))}
+                  onChange={() =>
+                    disabled || readOnly || onChange(xor([item], value))
+                  }
                   ref={inputRef}
                   value={name}
                   {...filteredProps}
@@ -170,11 +175,11 @@ function Select(props: SelectFieldProps) {
         ...labelProps,
         ...InputLabelProps,
       }}
-      inputProps={{ readOnly }}
       label={label}
       margin={margin}
       onChange={event =>
         disabled ||
+        readOnly ||
         onChange(event.target.value !== '' ? event.target.value : undefined)
       }
       required={required}

diff --git a/packages/uniforms-semantic/__tests__/BoolField.tsx b/packages/uniforms-semantic/__tests__/BoolField.tsx
@@ -51,14 +51,6 @@ test('<BoolField> - renders an input with correct disabled state', () => {
   expect(wrapper.find('input').prop('disabled')).toBe(true);
 });
 
-test('<BoolField> - renders an input with correct readOnly state', () => {
-  const element = <BoolField name="x" readOnly />;
-  const wrapper = mount(element, createContext({ x: { type: Boolean } }));
-
-  expect(wrapper.find('input')).toHaveLength(1);
-  expect(wrapper.find('input').prop('readOnly')).toBe(true);
-});
-
 test('<BoolField> - renders a input with correct label (specified)', () => {
   const element = <BoolField name="x" label="BoolFieldLabel" />;
   const wrapper = mount(element, createContext({ x: { type: Boolean } }));

diff --git a/packages/uniforms-semantic/__tests__/RadioField.tsx b/packages/uniforms-semantic/__tests__/RadioField.tsx
@@ -26,18 +26,6 @@ test('<RadioField> - renders a set of checkboxes with correct disabled state', (
   expect(wrapper.find('input').at(1).prop('disabled')).toBe(true);
 });
 
-test('<RadioField> - renders a set of checkboxes with correct readOnly state', () => {
-  const element = <RadioField name="x" readOnly />;
-  const wrapper = mount(
-    element,
-    createContext({ x: { type: String, allowedValues: ['a', 'b'] } }),
-  );
-
-  expect(wrapper.find('input')).toHaveLength(2);
-  expect(wrapper.find('input').at(0).prop('readOnly')).toBe(true);
-  expect(wrapper.find('input').at(1).prop('readOnly')).toBe(true);
-});
-
 test('<RadioField> - renders a set of checkboxes with correct id (inherited)', () => {
   const element = <RadioField name="x" />;
   const wrapper = mount(