fix: set readonly attribute on inputs (#139)

gravity-ui · Aug 23, 2024 · a34501d · a34501d
1 parent cb91068
commit a34501d
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 5 deletions.
diff --git a/src/components/DateField/hooks/useDateFieldProps.ts b/src/components/DateField/hooks/useDateFieldProps.ts
@@ -74,10 +74,6 @@ export function useDateFieldProps<T = DateTime>(
     });
 
     function syncSelectionFromDOM() {
-        if (state.readOnly) {
-            setSelectedSections(-1);
-            return;
-        }
         state.focusSectionInPosition(inputRef.current?.selectionStart ?? 0);
         setInnerState({});
     }
@@ -192,6 +188,7 @@ export function useDateFieldProps<T = DateTime>(
                 'aria-describedby': props['aria-describedby'] || undefined,
                 'aria-details': props['aria-details'] || undefined,
                 'aria-disabled': state.disabled || undefined,
+                readOnly: state.readOnly,
                 inputMode,
                 onClick() {
                     syncSelectionFromDOM();

diff --git a/src/components/RangeDatePicker/RangeDatePicker.tsx b/src/components/RangeDatePicker/RangeDatePicker.tsx
@@ -56,7 +56,6 @@ export function RangeDatePicker({className, ...props}: RangeDatePickerProps) {
             <TextInput
                 {...fieldProps}
                 className={b('field')}
-                hasClear={fieldProps.hasClear}
                 endContent={
                     <React.Fragment>
                         {!isOnlyTime && (

diff --git a/src/components/RelativeDateField/hooks/useRelativeDateFieldProps.ts b/src/components/RelativeDateField/hooks/useRelativeDateFieldProps.ts
@@ -54,6 +54,7 @@ export function useRelativeDateFieldProps(
                 'aria-describedby': props['aria-describedby'] || undefined,
                 'aria-details': props['aria-details'] || undefined,
                 'aria-disabled': state.disabled || undefined,
+                readOnly: state.readOnly,
             },
         },
         calendarProps: {

diff --git a/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx b/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx
@@ -140,6 +140,7 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
                     role: 'combobox',
                     'aria-expanded': open,
                     disabled: isMobile,
+                    readOnly: props.readOnly,
                     className: b('input', {mobile: isMobile}),
                     onClick: () => {
                         if (props.disabled) {

diff --git a/src/components/RelativeRangeDatePicker/components/Zones/Zones.tsx b/src/components/RelativeRangeDatePicker/components/Zones/Zones.tsx
@@ -61,6 +61,7 @@ export function Zones(props: ZonesProps) {
     const size = props.isMobile ? 'xl' : props.size;
     return (
         <Select
+            disabled={props.disabled}
             value={[timeZone]}
             options={zones}
             size={size}
@@ -82,6 +83,7 @@ export function Zones(props: ZonesProps) {
                         width="max"
                         pin="clear-clear"
                         size={size}
+                        disabled={props.disabled}
                         extraProps={{
                             'aria-haspopup': 'listbox',
                             'aria-expanded': controlProps.open,