chore(community-toggle-switch): remove autofocus prop

telus · Nov 22, 2019 · aede814 · aede814
1 parent 273fa42
commit aede814
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 32 deletions.
diff --git a/packages/ToggleSwitch/ToggleSwitch.jsx b/packages/ToggleSwitch/ToggleSwitch.jsx
@@ -16,18 +16,7 @@ import warn from '../../shared/utils/warn'
 
 const ToggleSwitch = React.forwardRef(
   (
-    {
-      id,
-      label,
-      tooltipText,
-      checked,
-      onClick,
-      tooltipCopy,
-      spinnerLabel,
-      autofocus,
-      isLoading,
-      ...rest
-    },
+    { id, label, tooltipText, checked, onClick, tooltipCopy, spinnerLabel, isLoading, ...rest },
     ref
   ) => {
     if (tooltipText && !tooltipCopy) {
@@ -63,15 +52,6 @@ const ToggleSwitch = React.forwardRef(
       },
     }))
 
-    useEffect(() => {
-      if (autofocus) {
-        buttonRef.current.focus()
-      }
-      /* If either checked or isLoading changes we need
-      to focus on buttonRef ONLY when autofocus is set
-    */
-    }, [checked, isLoading])
-
     const handleTooltipClick = event => {
       event.preventDefault()
     }
@@ -134,9 +114,6 @@ ToggleSwitch.propTypes = {
    @param {SyntheticEvent} event The React `SyntheticEvent` */
   onClick: PropTypes.func.isRequired,
 
-  /** Boolean to automatically focus on ToggleSwitch after interacting with it */
-  autofocus: PropTypes.bool,
-
   /** Boolean to show or hide spinner */
   isLoading: PropTypes.bool,
 }
@@ -145,7 +122,6 @@ ToggleSwitch.defaultProps = {
   checked: false,
   tooltipText: undefined,
   tooltipCopy: undefined,
-  autofocus: false,
   isLoading: false,
 }
 

diff --git a/packages/ToggleSwitch/ToggleSwitch.md b/packages/ToggleSwitch/ToggleSwitch.md
@@ -53,21 +53,22 @@ const App = () => {
 ;<App />
 ```
 
-**Asynchoronous usage with autofocus back on toggle after checked prop transition**
+**Asynchoronous usage**
 
 ```jsx
 const App = () => {
   const [isChecked, setIsChecked] = React.useState(false)
   const [isLoading, setIsLoading] = React.useState(false)
-  const [isAutoFocusable, setIsAutoFocusable] = React.useState(false)
+  const toggleRef = React.useRef()
+
   const handleClick = event => {
     setIsLoading(true)
-    setIsAutoFocusable(false)
+
     // NOTE: setTimeout does not allow proper focus management. Use promises in production
     setTimeout(() => {
-      setIsAutoFocusable(true)
       setIsChecked(!isChecked)
       setIsLoading(false)
+      toggleRef.current.focus()
     }, 2000)
   }
 
@@ -76,6 +77,7 @@ const App = () => {
       <FlexGrid.Row>
         <FlexGrid.Col xs={12} md={3}>
           <ToggleSwitch
+            ref={toggleRef}
             id="toggle-autofocus"
             label="Enable data"
             tooltipCopy="en"
@@ -84,7 +86,6 @@ const App = () => {
             checked={isChecked}
             onClick={handleClick}
             isLoading={isLoading}
-            autofocus={isAutoFocusable}
           />
         </FlexGrid.Col>
       </FlexGrid.Row>
@@ -140,8 +141,9 @@ const App = () => {
   const handleToggleError = event => {
     setIsLoading(true)
     setShowFeedbackText(false)
+
+    // NOTE: setTimeout does not allow proper focus management. Use promises in production
     setTimeout(() => {
-      // NOTE: setTimeout does not allow proper focus management. Use promises in production
       setIsChecked(!isChecked)
       setIsLoading(false)
       setShowFeedbackText(true)

diff --git a/packages/ToggleSwitch/__tests__/__snapshots__/ToggleSwitch.spec.jsx.snap b/packages/ToggleSwitch/__tests__/__snapshots__/ToggleSwitch.spec.jsx.snap
@@ -62,7 +62,6 @@ exports[`ToggleSwitch renders 1`] = `
 }
 
 <ToggleSwitch
-  autofocus={false}
   checked={false}
   id="my-id-123"
   isLoading={false}