fix(Collapse): checkbox not closing on ios while focusable tabindex (#…

…217)
daisyui · Sep 19, 2022 · 3fa2329 · 3fa2329
1 parent 4d4dcee
commit 3fa2329
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/src/Collapse/Collapse.stories.tsx b/src/Collapse/Collapse.stories.tsx
@@ -24,7 +24,18 @@ const Template: Story<CollapseProps> = (args) => {
 export const Default = Template.bind({})
 Default.args = {}
 
-export const Checkbox = Template.bind({})
+export const Checkbox = (args) => {
+  return (
+    <Collapse {...args}>
+      <Collapse.Title className="text-xl font-medium">
+        Click me to show/hide content
+      </Collapse.Title>
+      <Collapse.Content>
+        hello
+      </Collapse.Content>
+    </Collapse>
+  )
+}
 Checkbox.args = {
   checkbox: true,
 }
@@ -46,13 +57,35 @@ WithPlusMinus.args = {
   icon: 'plus',
 }
 
-export const ForceOpen = Template.bind({})
+export const ForceOpen = (args) => {
+  return (
+    <Collapse {...args}>
+      <Collapse.Title className="text-xl font-medium">
+        I have collapse-open class
+      </Collapse.Title>
+      <Collapse.Content>
+        tabindex="0" attribute is necessary to make the div focusable
+      </Collapse.Content>
+    </Collapse>
+  )
+}
 ForceOpen.args = {
   className: 'border border-base-300 bg-base-100 rounded-box',
   open: true,
 }
 
-export const ForceClose = Template.bind({})
+export const ForceClose = (args) => {
+  return (
+    <Collapse {...args}>
+      <Collapse.Title className="text-xl font-medium">
+        I have collapse-close class
+      </Collapse.Title>
+      <Collapse.Content>
+        tabindex="0" attribute is necessary to make the div focusable
+      </Collapse.Content>
+    </Collapse>
+  )
+}
 ForceClose.args = {
   className: 'border border-base-300 bg-base-100 rounded-box',
   open: false,

diff --git a/src/Collapse/Collapse.tsx b/src/Collapse/Collapse.tsx
@@ -1,4 +1,4 @@
-import React, { MutableRefObject, useEffect, useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
@@ -43,6 +43,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
       })
     )
 
+    const [isChecked, setIsChecked] = useState(open)
     const checkboxRef = useRef<HTMLInputElement>(null)
 
     // Handle events for checkbox changes
@@ -55,6 +56,8 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
       } else if (onClose && !checkboxRef.current?.checked) {
         onClose()
       }
+
+      setIsChecked(checkboxRef.current?.checked)
     }
 
     // Handle blur events, specifically handling open/close for non checkbox types
@@ -76,7 +79,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
         aria-expanded={open}
         {...props}
         ref={ref}
-        tabIndex={0}
+        tabIndex={isChecked === true ? undefined : 0}
         data-theme={dataTheme}
         className={classes}
         onBlur={handleBlur}
@@ -85,6 +88,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
         {checkbox && (
           <input
             type="checkbox"
+            tabIndex={isChecked === true ? 0 : undefined}
             className="peer"
             ref={checkboxRef}
             onChange={handleCheckboxChange}