[@mantine/core] Add option to configure clear button tab index in Sel…

…ect, MultiSelect and DatePicker components (#1243) * [@mantine/core] Select: Added tab index to clear button Signed-off-by: Andreas Weisberg <andreas.weisberg@gmail.com> * [@mantine/core] MultiSelect: Added tab index to clear button Signed-off-by: Andreas Weisberg <andreas.weisberg@gmail.com> * [@mantine/dates] DatePicker: Added tab index to clear button Signed-off-by: Andreas Weisberg <andreas.weisberg@gmail.com> * Made clear button tab index optional
mantinedev · Apr 13, 2022 · 8516a5c · 8516a5c
1 parent b0d879e
commit 8516a5c
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 1 deletion.
diff --git a/src/mantine-core/src/components/MultiSelect/MultiSelect.story.tsx b/src/mantine-core/src/components/MultiSelect/MultiSelect.story.tsx
@@ -295,4 +295,25 @@ storiesOf('MultiSelect', module)
     <MantineProvider defaultProps={{ MultiSelect: { radius: 0, label: 'Default label' } }}>
       <MultiSelect data={data} placeholder="Select items" />
     </MantineProvider>
+  ))
+  .add('Clearable button not in tab index', () => (
+    <div style={{ padding: 40, maxWidth: 400 }}>
+      <MultiSelect
+        label="Multi select"
+        data={data}
+        defaultValue={['react', 'ng']}
+        placeholder="Select items"
+        nothingFound="Nothing found"
+        searchable
+        clearable
+        clearButtonTabIndex={-1}
+      />
+      <MultiSelect
+        label="Multi select"
+        data={data}
+        defaultValue={['react', 'ng']}
+        placeholder="Select items"
+        nothingFound="Nothing found"
+      />
+    </div>
   ));
diff --git a/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx b/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx
@@ -86,6 +86,9 @@ export interface MultiSelectProps
 
   /** Select highlighted item on blur */
   selectOnBlur?: boolean;
+
+  /** Set the clear button tab index to disabled or default after input field */
+  clearButtonTabIndex?: -1 | 0;
 }
 
 export function defaultFilter(value: string, selected: boolean, item: SelectItem) {
@@ -121,6 +124,7 @@ const defaultProps: Partial<MultiSelectProps> = {
   switchDirectionOnFlip: false,
   zIndex: getDefaultZIndex('popover'),
   selectOnBlur: false,
+  clearButtonTabIndex: 0,
 };
 
 export const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
@@ -185,6 +189,7 @@ export const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
       errorProps,
       labelProps,
       descriptionProps,
+      clearButtonTabIndex,
       ...others
     } = useMantineDefaultProps('MultiSelect', defaultProps, props);
 
@@ -589,6 +594,7 @@ export const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
               onClear: handleClear,
               error,
               disabled,
+              clearButtonTabIndex,
             })}
           >
             <div className={classes.values}>

diff --git a/src/mantine-core/src/components/Select/Select.story.tsx b/src/mantine-core/src/components/Select/Select.story.tsx
@@ -333,4 +333,24 @@ storiesOf('Select', module)
         searchable
       />
     </div>
+  ))
+  .add('Clearable button not in tab index', () => (
+    <div style={{ padding: 40, maxWidth: 400 }}>
+      <Select
+        label="Search in first select"
+        placeholder="Choose value"
+        data={stringData}
+        searchable
+        clearable
+        clearButtonTabIndex={-1}
+      />
+      <Select
+        label="Tab directly to next select"
+        placeholder="Choose value"
+        data={stringData}
+        searchable
+        clearable
+        clearButtonTabIndex={-1}
+      />
+    </div>
   ));
diff --git a/src/mantine-core/src/components/Select/Select.tsx b/src/mantine-core/src/components/Select/Select.tsx
@@ -131,6 +131,9 @@ export interface SelectProps
 
   /** Should data be filtered when search value exactly matches selected item */
   filterDataOnExactSearchMatch?: boolean;
+
+  /** Set the clear button tab index to disabled or default after input field */
+  clearButtonTabIndex?: -1 | 0;
 }
 
 export function defaultFilter(value: string, item: SelectItem) {
@@ -161,6 +164,7 @@ const defaultProps: Partial<SelectProps> = {
   switchDirectionOnFlip: false,
   filterDataOnExactSearchMatch: false,
   zIndex: getDefaultZIndex('popover'),
+  clearButtonTabIndex: 0,
 };
 
 export const Select = forwardRef<HTMLInputElement, SelectProps>((props: SelectProps, ref) => {
@@ -220,6 +224,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props: SelectPr
     labelProps,
     placeholder,
     filterDataOnExactSearchMatch,
+    clearButtonTabIndex,
     ...others
   } = useMantineDefaultProps('Select', defaultProps, props);
 
@@ -608,6 +613,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props: SelectPr
             clearButtonLabel,
             onClear: handleClear,
             error,
+            clearButtonTabIndex,
           })}
         />
 

diff --git a/src/mantine-core/src/components/Select/SelectRightSection/SelectRightSection.tsx b/src/mantine-core/src/components/Select/SelectRightSection/SelectRightSection.tsx
@@ -11,6 +11,7 @@ export interface SelectRightSectionProps {
   error?: any;
   // eslint-disable-next-line react/no-unused-prop-types
   disabled?: boolean;
+  clearButtonTabIndex?: number;
 }
 
 export function SelectRightSection({
@@ -19,13 +20,15 @@ export function SelectRightSection({
   onClear,
   size,
   error,
+  clearButtonTabIndex,
 }: SelectRightSectionProps) {
   return shouldClear ? (
     <CloseButton
       variant="transparent"
       aria-label={clearButtonLabel}
       onClick={onClear}
       size={size}
+      tabIndex={clearButtonTabIndex}
     />
   ) : (
     <ChevronIcon error={error} size={size} />

diff --git a/src/mantine-dates/src/components/DatePicker/DatePicker.story.tsx b/src/mantine-dates/src/components/DatePicker/DatePicker.story.tsx
@@ -154,4 +154,9 @@ storiesOf('DatePicker', module)
         allowFreeInput
       />
     </SubmitForm>
+  ))
+  .add('Clear button tab index disabled', () => (
+    <div style={{ padding: 40, maxWidth: 400 }}>
+      <DatePicker placeholder="Submit with enter" label="Event date" clearButtonTabIndex={-1} />
+    </div>
   ));
diff --git a/src/mantine-dates/src/components/DatePickerBase/DatePickerBase.tsx b/src/mantine-dates/src/components/DatePickerBase/DatePickerBase.tsx
@@ -101,6 +101,9 @@ export interface DatePickerBaseSharedProps
 
   /** Modal z-index */
   modalZIndex?: number;
+
+  /** Set the clear button tab index to disabled or default after input field */
+  clearButtonTabIndex?: -1 | 0;
 }
 
 export interface DatePickerBaseProps extends DatePickerBaseSharedProps {
@@ -181,6 +184,7 @@ export const DatePickerBase = forwardRef<HTMLInputElement, DatePickerBaseProps>(
       errorProps,
       labelProps,
       descriptionProps,
+      clearButtonTabIndex = 0,
       ...others
     }: DatePickerBaseProps,
     ref
@@ -234,6 +238,7 @@ export const DatePickerBase = forwardRef<HTMLInputElement, DatePickerBaseProps>(
         aria-label={clearButtonLabel}
         onClick={onClear}
         size={size}
+        tabIndex={clearButtonTabIndex}
       />
     ) : null;
 

diff --git a/src/mantine-dates/src/components/DateRangePicker/DateRangePicker.story.tsx b/src/mantine-dates/src/components/DateRangePicker/DateRangePicker.story.tsx
@@ -82,4 +82,9 @@ storiesOf('DateRangePicker', module)
       <DateRangePicker initialLevel="year" />
     </div>
   ))
-  .add('Controlled', () => <Controlled />);
+  .add('Controlled', () => <Controlled />)
+  .add('Clear button tab index disabled', () => (
+    <div style={{ padding: 40 }}>
+      <DateRangePicker clearButtonTabIndex={-1} />
+    </div>
+  ));