fix(DatePicker): fixed disabled state for DatePicker

packages/react/src/components/ComboBox/ComboBox-test.js

@@ -1986,4 +1986,22 @@ describe('ComboBox', () => {
       expect(findMenuItemNode(i)).toHaveAttribute('aria-selected', 'false');
     }
   });
+
+  it('should prioritize disabled over readOnly when both are true', () => {
+    render(
+      <ComboBox
+        id="combobox"
+        items={mockProps.items}
+        itemToString={(item) => (item ? item.text : '')}
+        titleText="ComboBox label"
+        disabled={true}
+        readOnly={true}
+      />
+    );
+
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('disabled', '');
+    expect(input.disabled).toBe(true);
+    expect(input.readOnly).toBe(false);
+  });
 });

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -815,6 +815,7 @@ const ComboBox = forwardRef(
 
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
+      [`${prefix}--label--readonly`]: readOnly && !disabled,
     });
     const helperTextId = `combobox-helper-text-${comboBoxInstanceId}`;
     const warnTextId = `combobox-warn-text-${comboBoxInstanceId}`;
@@ -1208,7 +1209,7 @@ const ComboBox = forwardRef(
               })}
               {...rest}
               {...readOnlyEventHandlers}
-              readOnly={readOnly}
+              {...(readOnly && !disabled ? { readOnly: true } : {})}
               aria-describedby={ariaDescribedBy}
             />
 

packages/react/src/components/DatePicker/DatePicker-test.js

@@ -1007,6 +1007,27 @@ describe('Range date picker', () => {
     expect(onChange).toHaveBeenCalledTimes(0);
   });
 
+  it('should prioritize disabled over readOnly on standalone DatePickerInput when both are true', () => {
+    render(
+      <DatePickerInput
+        id="date-picker-input-standalone"
+        placeholder="mm/dd/yyyy"
+        labelText="Date Picker label"
+        disabled={true}
+        readOnly={true}
+      />
+    );
+
+    const input = screen.getByLabelText('Date Picker label');
+    expect(input).toHaveAttribute('disabled', '');
+    expect(input.disabled).toBe(true);
+    expect(input.readOnly).toBe(false);
+
+    const label = screen.getByText('Date Picker label');
+    expect(label).toHaveClass(`${prefix}--label--disabled`);
+    expect(label).not.toHaveClass(`${prefix}--label--readonly`);
+  });
+
   it('should work with ISO 8601 format or others', async () => {
     const onChange = jest.fn();
 

packages/react/src/components/DatePicker/DatePicker.tsx

@@ -521,10 +521,12 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
     const onHook = (_electedDates, _dateStr, instance) => {
       updateClassNames(instance, prefix);
       if (startInputField?.current) {
-        startInputField.current.readOnly = readOnly;
+        startInputField.current.readOnly =
+          readOnly && !startInputField.current.disabled;
       }
       if (endInputField?.current) {
-        endInputField.current.readOnly = readOnly;
+        endInputField.current.readOnly =
+          readOnly && !endInputField.current.disabled;
       }
     };
 

packages/react/src/components/DatePickerInput/DatePickerInput.tsx

@@ -222,13 +222,14 @@ const DatePickerInput = frFn((props, ref) => {
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
     [`${prefix}--label--disabled`]: normalizedProps.disabled,
-    [`${prefix}--label--readonly`]: readOnly,
+    [`${prefix}--label--readonly`]: readOnly && !normalizedProps.disabled,
   });
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,
   });
   const inputClasses = cx(`${prefix}--date-picker__input`, {
     [`${prefix}--date-picker__input--${size}`]: size,
+    [`${prefix}--date-picker__input--disabled`]: normalizedProps.disabled,
     [`${prefix}--date-picker__input--invalid`]: normalizedProps.invalid,
     [`${prefix}--date-picker__input--warn`]: normalizedProps.warn,
   });
@@ -261,6 +262,10 @@ const DatePickerInput = frFn((props, ref) => {
     ref,
     ['aria-describedby']: ariaDescribedBy,
   };
+
+  if (readOnly && !normalizedProps.disabled) {
+    inputProps.readOnly = true;
+  }
   if (normalizedProps.invalid) {
     inputProps['data-invalid'] = true;
     inputProps['aria-invalid'] = true;

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -466,14 +466,15 @@ const Dropdown = React.forwardRef(
       [`${prefix}--dropdown--inline`]: inline,
       [`${prefix}--dropdown--disabled`]: normalizedProps.disabled,
       [`${prefix}--dropdown--light`]: light,
-      [`${prefix}--dropdown--readonly`]: readOnly,
+      [`${prefix}--dropdown--readonly`]: readOnly && !normalizedProps.disabled,
       [`${prefix}--dropdown--${size}`]: size,
       [`${prefix}--list-box--up`]: direction === 'top',
       [`${prefix}--autoalign`]: autoAlign,
     });
 
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: normalizedProps.disabled,
+      [`${prefix}--label--readonly`]: readOnly && !normalizedProps.disabled,
       [`${prefix}--visually-hidden`]: hideLabel,
     });
 

packages/react/src/components/Dropdown/__tests__/Dropdown-test.js

@@ -718,4 +718,22 @@ describe('Validation message ids', () => {
       'test-dropdown-warn-msg'
     );
   });
+
+  it('should prioritize disabled over readOnly when both are true', () => {
+    render(
+      <Dropdown
+        id="dropdown"
+        items={mockProps.items}
+        itemToString={(item) => (item ? item.text : '')}
+        titleText="Dropdown label"
+        disabled={true}
+        readOnly={true}
+      />
+    );
+
+    const button = screen.getByRole('combobox');
+    expect(button).toHaveAttribute('disabled', '');
+    expect(button.disabled).toBe(true);
+    expect(button).not.toHaveAttribute('aria-readonly');
+  });
 });

packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx

@@ -575,6 +575,7 @@ export const FilterableMultiSelect = forwardRef(function FilterableMultiSelect<
   const titleClasses = cx({
     [`${prefix}--label`]: true,
     [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--label--readonly`]: readOnly && !disabled,
     [`${prefix}--visually-hidden`]: hideLabel,
   });
   const helperClasses = cx({
@@ -856,7 +857,7 @@ export const FilterableMultiSelect = forwardRef(function FilterableMultiSelect<
       [`${prefix}--multi-select--selected`]:
         controlledSelectedItems?.length > 0,
       [`${prefix}--multi-select--filterable--input-focused`]: inputFocused,
-      [`${prefix}--multi-select--readonly`]: readOnly,
+      [`${prefix}--multi-select--readonly`]: readOnly && !disabled,
       [`${prefix}--multi-select--selectall`]: selectAll,
     }
   );
@@ -1029,7 +1030,7 @@ export const FilterableMultiSelect = forwardRef(function FilterableMultiSelect<
             {...inputProp}
             ref={mergedRef}
             {...readOnlyEventHandlers}
-            readOnly={readOnly}
+            {...(readOnly && !disabled ? { readOnly: true } : {})}
           />
           {normalizedProps.invalid && (
             <WarningFilled className={`${prefix}--list-box__invalid-icon`} />

packages/react/src/components/MultiSelect/MultiSelect.tsx

@@ -566,6 +566,7 @@ export const MultiSelect = React.forwardRef(
     );
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
+      [`${prefix}--label--readonly`]: readOnly,
       [`${prefix}--visually-hidden`]: hideLabel,
     });
     const helperId = !helperText
@@ -806,7 +807,7 @@ export const MultiSelect = React.forwardRef(
               type="button"
               className={`${prefix}--list-box__field`}
               disabled={disabled}
-              aria-disabled={disabled || readOnly}
+              aria-disabled={readOnly ? true : undefined}
               aria-describedby={
                 !inline && showHelperText ? helperId : undefined
               }

packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js

@@ -1531,4 +1531,23 @@ describe('FilterableMultiSelect', () => {
       .slice(1)
       .forEach((opt) => expect(opt).toHaveAttribute('aria-selected', 'false'));
   });
+
+  it('should prioritize disabled over readOnly when both are true', () => {
+    const items = generateItems(5, generateGenericItem);
+    render(
+      <FilterableMultiSelect
+        id="filterable-multiselect"
+        items={items}
+        itemToString={(item) => (item ? item.label : '')}
+        titleText="FilterableMultiSelect label"
+        disabled={true}
+        readOnly={true}
+      />
+    );
+
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('disabled', '');
+    expect(input.disabled).toBe(true);
+    expect(input.readOnly).toBe(false);
+  });
 });

packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js

@@ -1693,4 +1693,22 @@ describe('MultiSelect', () => {
       );
     });
   });
+
+  it('should prioritize disabled over readOnly when both are true', () => {
+    render(
+      <MultiSelect
+        id="multiselect"
+        items={mockProps.items}
+        itemToString={(item) => (item ? item.text : '')}
+        titleText="MultiSelect label"
+        disabled={true}
+        readOnly={true}
+      />
+    );
+
+    const button = screen.getByRole('combobox');
+    expect(button).toHaveAttribute('disabled', '');
+    expect(button.disabled).toBe(true);
+    expect(button).not.toHaveAttribute('aria-readonly');
+  });
 });

packages/react/src/components/NumberInput/NumberInput.tsx

@@ -945,6 +945,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
           data-invalid={normalizedProps.invalid ? true : undefined}>
           <Label
             disabled={normalizedProps.disabled}
+            readOnly={readOnly}
             hideLabel={hideLabel}
             id={id}
             label={label}
@@ -955,7 +956,9 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
               data-invalid={normalizedProps.invalid ? true : undefined}
               aria-invalid={normalizedProps.invalid}
               aria-describedby={ariaDescribedBy}
-              aria-readonly={readOnly}
+              aria-readonly={
+                readOnly && !normalizedProps.disabled ? true : undefined
+              }
               disabled={normalizedProps.disabled}
               ref={ref}
               id={id}
@@ -1066,7 +1069,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
               }}
               pattern={pattern}
               inputMode={inputMode}
-              readOnly={readOnly}
+              {...(readOnly && !disabled ? { readOnly: true } : {})}
               step={step}
               type={type}
               value={type === 'number' ? value : inputValue}
@@ -1360,16 +1363,18 @@ NumberInput.propTypes = {
 
 interface LabelProps {
   disabled?: boolean;
+  readOnly?: boolean;
   hideLabel?: boolean;
   id?: string;
   label?: ReactNode;
 }
 
-const Label = ({ disabled, id, hideLabel, label }: LabelProps) => {
+const Label = ({ disabled, readOnly, id, hideLabel, label }: LabelProps) => {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--label`]: true,
     [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--label--readonly`]: readOnly,
     [`${prefix}--visually-hidden`]: hideLabel,
   });
 

packages/react/src/components/NumberInput/__tests__/NumberInput-test.js

@@ -2727,6 +2727,22 @@ describe('NumberInput', () => {
 
       numberFormatSpy.mockRestore();
     });
+
+    it('should prioritize disabled over readOnly when both are true', () => {
+      render(
+        <NumberInput
+          id="input-1"
+          label="NumberInput label"
+          disabled={true}
+          readOnly={true}
+        />
+      );
+
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveAttribute('disabled', '');
+      expect(input.disabled).toBe(true);
+      expect(input.readOnly).toBe(false);
+    });
   });
 
   describe('validateNumberSeparators - Indian locale', () => {

packages/react/src/components/RadioButton/RadioButton.tsx

@@ -217,7 +217,7 @@ const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
           value={value}
           name={name}
           required={required}
-          readOnly={readOnly}
+          {...(readOnly && !normalizedProps.disabled ? { readOnly: true } : {})}
         />
         <label htmlFor={uniqueId} className={`${prefix}--radio-button__label`}>
           <span className={`${prefix}--radio-button__appearance`} />

packages/react/src/components/RadioButton/__tests__/RadioButton-test.js

@@ -194,4 +194,21 @@ describe('RadioButton', () => {
     );
     expect(screen.getByRole('radio')).toHaveAttribute('required');
   });
+
+  it('should prioritize disabled over readOnly when both are true', () => {
+    render(
+      <RadioButton
+        name="test-name"
+        value="test-value"
+        labelText="test-label"
+        disabled={true}
+        readOnly={true}
+      />
+    );
+
+    const radio = screen.getByRole('radio');
+    expect(radio).toHaveAttribute('disabled', '');
+    expect(radio.disabled).toBe(true);
+    expect(radio.readOnly).toBe(false);
+  });
 });

packages/react/src/components/Select/Select.tsx

@@ -215,7 +215,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
       [`${prefix}--select--light`]: light,
       [`${prefix}--select--invalid`]: normalizedProps.invalid,
       [`${prefix}--select--disabled`]: normalizedProps.disabled,
-      [`${prefix}--select--readonly`]: readOnly,
+      [`${prefix}--select--readonly`]: readOnly && !normalizedProps.disabled,
       [`${prefix}--select--warning`]: normalizedProps.warn,
       [`${prefix}--select--fluid--invalid`]: isFluid && normalizedProps.invalid,
       [`${prefix}--select--fluid--focus`]: isFluid && isFocused,
@@ -228,6 +228,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
     const labelClasses = classNames(`${prefix}--label`, {
       [`${prefix}--visually-hidden`]: hideLabel,
       [`${prefix}--label--disabled`]: normalizedProps.disabled,
+      [`${prefix}--label--readonly`]: readOnly && !normalizedProps.disabled,
     });
     const inputClasses = classNames({
       [`${prefix}--select-input`]: true,
@@ -266,7 +267,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
     const readOnlyEventHandlers = {
       onMouseDown: (evt) => {
         // NOTE: does not prevent click
-        if (readOnly) {
+        if (readOnly && !normalizedProps.disabled) {
           evt.preventDefault();
           // focus on the element as per readonly input behavior
           evt.target.focus();
@@ -275,7 +276,11 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
       onKeyDown: (evt) => {
         const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' '];
         // This prevents the select from opening for the above keys
-        if (readOnly && selectAccessKeys.includes(evt.key)) {
+        if (
+          readOnly &&
+          !normalizedProps.disabled &&
+          selectAccessKeys.includes(evt.key)
+        ) {
           evt.preventDefault();
         }
       },
@@ -298,7 +303,9 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
             className={inputClasses}
             disabled={normalizedProps.disabled || undefined}
             aria-invalid={normalizedProps.invalid || undefined}
-            aria-readonly={readOnly || undefined}
+            aria-readonly={
+              readOnly && !normalizedProps.disabled ? true : undefined
+            }
             title={title}
             onChange={composeEventHandlers([onChange, handleChange])}
             {...readOnlyEventHandlers}