fix: SortDropdownをformでマークアップする

kufu · Nov 20, 2024 · 0b8451d · 0b8451d
1 parent 693261d
commit 0b8451d
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 42 deletions.
diff --git a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
@@ -84,46 +84,48 @@ export const SortDropdown: FC<Props & ElementProps> = ({
         </Button>
       </DropdownTrigger>
       <DropdownContent controllable>
-        <Stack className={bodyStyle}>
-          <FormControl title={sortFieldLabel}>
-            <Select
-              name="sortFields"
-              options={innerFields}
-              onChange={handleChange}
-              className={selectStyle}
-            />
-          </FormControl>
-          <Fieldset title={sortOrderLabel} innerMargin={0.5}>
-            <Cluster gap={1.25}>
-              <RadioButton
-                name="sortOrder"
-                value="asc"
-                defaultChecked={innerCheckedOrder === 'asc'}
-                onChange={() => setCheckedInnerOrder('asc')}
-              >
-                {ascLabel}
-              </RadioButton>
-              <RadioButton
-                name="sortOrder"
-                value="desc"
-                defaultChecked={innerCheckedOrder === 'desc'}
-                onChange={() => setCheckedInnerOrder('desc')}
-              >
-                {descLabel}
-              </RadioButton>
-            </Cluster>
-          </Fieldset>
-        </Stack>
-        <Cluster gap={1} align="center" justify="flex-end" as="footer" className={footerStyle}>
-          <DropdownCloser>
-            <Button onClick={onCancel}>{cancelButtonLabel}</Button>
-          </DropdownCloser>
-          <DropdownCloser>
-            <Button variant="primary" onClick={handleApply}>
-              {applyButtonLabel}
-            </Button>
-          </DropdownCloser>
-        </Cluster>
+        <form onSubmit={handleApply}>
+          <Stack className={bodyStyle}>
+            <FormControl title={sortFieldLabel}>
+              <Select
+                name="sortFields"
+                options={innerFields}
+                onChange={handleChange}
+                className={selectStyle}
+              />
+            </FormControl>
+            <Fieldset title={sortOrderLabel} innerMargin={0.5}>
+              <Cluster gap={1.25}>
+                <RadioButton
+                  name="sortOrder"
+                  value="asc"
+                  defaultChecked={innerCheckedOrder === 'asc'}
+                  onChange={() => setCheckedInnerOrder('asc')}
+                >
+                  {ascLabel}
+                </RadioButton>
+                <RadioButton
+                  name="sortOrder"
+                  value="desc"
+                  defaultChecked={innerCheckedOrder === 'desc'}
+                  onChange={() => setCheckedInnerOrder('desc')}
+                >
+                  {descLabel}
+                </RadioButton>
+              </Cluster>
+            </Fieldset>
+          </Stack>
+          <Cluster gap={1} align="center" justify="flex-end" as="footer" className={footerStyle}>
+            <DropdownCloser>
+              <Button onClick={onCancel}>{cancelButtonLabel}</Button>
+            </DropdownCloser>
+            <DropdownCloser>
+              <Button type="submit" variant="primary">
+                {applyButtonLabel}
+              </Button>
+            </DropdownCloser>
+          </Cluster>
+        </form>
       </DropdownContent>
     </Dropdown>
   )

diff --git a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/useSortDropdown.ts b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/useSortDropdown.ts
@@ -1,6 +1,6 @@
 import {
-  ChangeEventHandler,
   ComponentProps,
+  FormEventHandler,
   MouseEventHandler,
   useCallback,
   useMemo,
@@ -71,7 +71,7 @@ export const useSortDropdown = ({ sortFields, defaultOrder, onApply, decorators
     [checkedOrder],
   )
 
-  const handleChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
+  const handleChange = useCallback<FormEventHandler<HTMLFormElement>>(
     (e) => {
       const select = e.currentTarget
       const newLabel = select.options[select.selectedIndex].label