issue #134: use an UncontrolledPopover to fix popovers for Safari

src/components/Form/FormHelpButton.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, waitForElementToBeRemoved } from '@testing-library/react'
 import FormHelpButton from './FormHelpButton'
 
 describe('FormHelpButton', () => {
@@ -15,28 +15,52 @@ describe('FormHelpButton', () => {
     expect(queryByText('def')).toBeNull()
   })
 
-  it('opens', () => {
-    const { getByLabelText, queryByText } = render(<FormHelpButton identifier="abc" label="def" />)
+  it('opens', async () => {
+    const { getByLabelText, findByText, queryByText } = render(<FormHelpButton identifier="abc" label="def" />)
 
-    fireEvent.focus(getByLabelText('help'))
+    fireEvent.click(getByLabelText('help'))
 
+    await findByText('def')
     expect(queryByText('def')).not.toBeNull()
   })
 
-  it('displays help', () => {
-    const { getByLabelText, getByText } = render(<FormHelpButton identifier="abc" label="def" help="some help" />)
+  it('displays help', async () => {
+    const { getByLabelText, findByText, queryByText } = render(
+      <FormHelpButton identifier="abc" label="def" help="some help" />,
+    )
 
-    fireEvent.focus(getByLabelText('help'))
+    fireEvent.click(getByLabelText('help'))
 
-    expect(getByText('some help')).toBeTruthy()
+    await findByText('some help')
+    expect(queryByText('some help')).toBeTruthy()
   })
 
-  it('closes', () => {
-    const { getByLabelText, queryByText } = render(<FormHelpButton identifier="abc" label="def" />)
+  it('closes inside', async () => {
+    const { getByLabelText, findByText, queryByText } = render(<FormHelpButton identifier="abc" label="def" />)
+    fireEvent.click(getByLabelText('help'))
+    await findByText('def')
+    expect(queryByText('def')).not.toBeNull()
+
+    fireEvent.click(getByLabelText('help'))
+
+    await waitForElementToBeRemoved(() => queryByText('def'))
+    expect(queryByText('def')).toBeNull()
+  })
+
+  it('closes outside', async () => {
+    const { getByLabelText, findByText, getByText, queryByText } = render(
+      <div>
+        <FormHelpButton identifier="abc" label="def" />
+        <span>click outside</span>
+      </div>,
+    )
+    fireEvent.click(getByLabelText('help'))
+    await findByText('def')
+    expect(queryByText('def')).not.toBeNull()
 
-    fireEvent.focus(getByLabelText('help'))
-    fireEvent.blur(getByLabelText('help'))
+    fireEvent.click(getByText('click outside'))
 
+    await waitForElementToBeRemoved(() => queryByText('def'))
     expect(queryByText('def')).toBeNull()
   })
 })

src/components/Form/FormHelpButton.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React from 'react'
 
-import { Button, Card, CardBody, CardHeader, Popover } from 'reactstrap'
+import { Button, Card, CardBody, CardHeader, UncontrolledPopover } from 'reactstrap'
 
 import { FaQuestion } from 'react-icons/fa'
 
@@ -17,33 +17,26 @@ export interface FormHelpButtonProps {
 }
 
 export default function FormHelpButton({ identifier, label, help }: FormHelpButtonProps) {
-  const [popoverOpen, setPopoverOpen] = useState(false)
-
   return (
     <>
       <Button
         id={safeId(identifier)}
         className="help-button"
         type="button"
+        aria-label="help"
         onClick={e => {
-          if (!popoverOpen) {
-            e.currentTarget.focus()
-          }
           e.preventDefault()
           e.stopPropagation()
         }}
-        onFocus={() => setPopoverOpen(true)}
-        onBlur={() => setPopoverOpen(false)}
-        aria-label="help"
       >
         <FaQuestion className="help-button-icon" />
       </Button>
-      <Popover placement="right" target={safeId(identifier)} trigger="focus" hideArrow isOpen={popoverOpen}>
+      <UncontrolledPopover placement="right" target={safeId(identifier)} trigger="legacy" hideArrow>
         <Card>
           <CardHeader>{label}</CardHeader>
           <CardBody>{help}</CardBody>
         </Card>
-      </Popover>
+      </UncontrolledPopover>
     </>
   )
 }