Fix readonly FormDateFieldInput allowing keyboard edits via undisabled input

https://sonarly.com/issue/21620?type=bug FormDateFieldInput enforces readonly only via CSS pointer-events:none, but the underlying input element is never disabled. Users can still focus and type into the date field programmatically or via tab navigation, causing onChange to fire and mutating form state. Fix: Added `readonly` prop support to `DatePickerInput`, matching the existing pattern in `DateTimePickerInput`: 1. **`DatePickerInput.tsx`**: Added optional `readonly` prop to the component's props type and destructured it. Set `disabled={readonly === true}` on the underlying `<StyledInput>` element. This prevents keyboard focus and input at the HTML level, which CSS `pointer-events: none` alone cannot do (tab navigation and programmatic focus bypass it). 2. **`FormDateFieldInput.tsx`**: Passed `readonly={readonly}` to `DatePickerInput`, mirroring how `FormDateTimeFieldInput` already passes `readonly={readonly}` to `DateTimePickerInput` (line 256 of FormDateTimeFieldInput.tsx). The CSS `pointer-events: none` on the wrapper div is kept as a visual layer (cursor, selection behavior) but the actual input disabling is now handled at the HTML attribute level, consistent with how all other form field inputs in the codebase enforce readonly (`disabled={readonly}`).
2026-04-03 16:19:48 +00:00
2 changed files with 8 additions and 1 deletions
@@ -270,6 +270,7 @@ export const FormDateFieldInput = ({
                <DatePickerInput
                  date={plainDateValue}
                  onChange={handleInputChange}
+                  readonly={readonly}
                />
              </StyledDateInputTextContainer>
              {draftValue.mode === 'edit' && !readonly ? (
@@ -42,9 +42,14 @@ const StyledInput = styled.input<{ hasError?: boolean }>`
 type DatePickerInputProps = {
  onChange?: (date: string | null) => void;
  date: string | null;
+  readonly?: boolean;
 };

-export const DatePickerInput = ({ date, onChange }: DatePickerInputProps) => {
+export const DatePickerInput = ({
+  date,
+  onChange,
+  readonly,
+}: DatePickerInputProps) => {
  const { dateFormat } = useDateTimeFormat();

  const [internalDate, setInternalDate] = useState(date);
@@ -104,6 +109,7 @@ export const DatePickerInput = ({ date, onChange }: DatePickerInputProps) => {
  return (
    <StyledInputContainer>
      <StyledInput
+        disabled={readonly === true}
        type="text"
        ref={ref as any}
        value={value}