Fix focus styles showing up when using the mouse (#2347)

* update playground examples to use a shared `Button`

* expose a `ui-focus-visible` variant

* keep track of a `data-headlessui-focus-visible` attribute

* do not set the `tabindex`

The focus was always set, but the ring wasn't showing up. This was also
focusing a ring when the browser decided not the add one.

Let's make the browser decide when to show this or not.

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix focus styles showing up when using the mouse ([#2347](https://github.com/tailwindlabs/headlessui/pull/2347))
 
 ## [1.7.13] - 2023-03-03
 

packages/@headlessui-react/src/utils/focus-management.ts

@@ -116,6 +116,47 @@ export function restoreFocusIfNecessary(element: HTMLElement | null) {
   })
 }
 
+// The method of triggering an action, this is used to determine how we should
+// restore focus after an action has been performed.
+enum ActivationMethod {
+  /* If the action was triggered by a keyboard event. */
+  Keyboard = 0,
+
+  /* If the action was triggered by a mouse / pointer / ... event.*/
+  Mouse = 1,
+}
+
+// We want to be able to set and remove the `data-headlessui-mouse` attribute on the `html` element.
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  document.addEventListener(
+    'keydown',
+    (event) => {
+      if (event.metaKey || event.altKey || event.ctrlKey) {
+        return
+      }
+
+      document.documentElement.dataset.headlessuiFocusVisible = ''
+    },
+    true
+  )
+
+  document.addEventListener(
+    'click',
+    (event) => {
+      // Event originated from an actual mouse click
+      if (event.detail === ActivationMethod.Mouse) {
+        delete document.documentElement.dataset.headlessuiFocusVisible
+      }
+
+      // Event originated from a keyboard event that triggered the `click` event
+      else if (event.detail === ActivationMethod.Keyboard) {
+        document.documentElement.dataset.headlessuiFocusVisible = ''
+      }
+    },
+    true
+  )
+}
+
 export function focusElement(element: HTMLElement | null) {
   element?.focus({ preventScroll: true })
 }
@@ -232,14 +273,5 @@ export function focusIn(
     next.select()
   }
 
-  // This is a little weird, but let me try and explain: There are a few scenario's
-  // in chrome for example where a focused `<a>` tag does not get the default focus
-  // styles and sometimes they do. This highly depends on whether you started by
-  // clicking or by using your keyboard. When you programmatically add focus `anchor.focus()`
-  // then the active element (document.activeElement) is this anchor, which is expected.
-  // However in that case the default focus styles are not applied *unless* you
-  // also add this tabindex.
-  if (!next.hasAttribute('tabindex')) next.setAttribute('tabindex', '0')
-
   return FocusResult.Success
 }

packages/@headlessui-tailwindcss/package.json

@@ -37,6 +37,6 @@
   },
   "devDependencies": {
     "esbuild": "^0.11.18",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.7"
   }
 }

packages/@headlessui-tailwindcss/src/index.test.ts

@@ -9,6 +9,7 @@ let css = String.raw
 function run(input: string, config: any, plugin = tailwind) {
   let { currentTestName } = expect.getState()
 
+  // @ts-ignore
   return postcss(plugin(config)).process(input, {
     from: `${path.resolve(__filename)}?test=${currentTestName}`,
   })
@@ -52,6 +53,21 @@ it('should generate the inverse "not" css for an exposed state', async () => {
   })
 })
 
+it('should generate the ui-focus-visible variant', async () => {
+  let config = {
+    content: [{ raw: html`<div class="ui-focus-visible:underline"></div>` }],
+    plugins: [hui],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      :where([data-headlessui-focus-visible]) .ui-focus-visible\:underline:focus {
+        text-decoration-line: underline;
+      }
+    `)
+  })
+})
+
 describe('custom prefix', () => {
   it('should generate css for an exposed state', async () => {
     let config = {

packages/@headlessui-tailwindcss/src/index.ts

@@ -31,6 +31,8 @@ export default plugin.withOptions<Options>(({ prefix = 'ui' } = {}) => {
         `&[data-headlessui-state]:not([data-headlessui-state~="${state}"])`,
         `:where([data-headlessui-state]:not([data-headlessui-state~="${state}"])) &:not([data-headlessui-state])`,
       ])
+
+      addVariant(`${prefix}-focus-visible`, ':where([data-headlessui-focus-visible]) &:focus')
     }
   }
 })

packages/@headlessui-vue/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix focus styles showing up when using the mouse ([#2347](https://github.com/tailwindlabs/headlessui/pull/2347))
 
 ## [1.7.12] - 2023-03-03
 

packages/@headlessui-vue/src/utils/focus-management.ts

@@ -109,6 +109,47 @@ export function restoreFocusIfNecessary(element: HTMLElement | null) {
   })
 }
 
+// The method of triggering an action, this is used to determine how we should
+// restore focus after an action has been performed.
+enum ActivationMethod {
+  /* If the action was triggered by a keyboard event. */
+  Keyboard = 0,
+
+  /* If the action was triggered by a mouse / pointer / ... event.*/
+  Mouse = 1,
+}
+
+// We want to be able to set and remove the `data-headlessui-mouse` attribute on the `html` element.
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  document.addEventListener(
+    'keydown',
+    (event) => {
+      if (event.metaKey || event.altKey || event.ctrlKey) {
+        return
+      }
+
+      document.documentElement.dataset.headlessuiFocusVisible = ''
+    },
+    true
+  )
+
+  document.addEventListener(
+    'click',
+    (event) => {
+      // Event originated from an actual mouse click
+      if (event.detail === ActivationMethod.Mouse) {
+        delete document.documentElement.dataset.headlessuiFocusVisible
+      }
+
+      // Event originated from a keyboard event that triggered the `click` event
+      else if (event.detail === ActivationMethod.Keyboard) {
+        document.documentElement.dataset.headlessuiFocusVisible = ''
+      }
+    },
+    true
+  )
+}
+
 export function focusElement(element: HTMLElement | null) {
   element?.focus({ preventScroll: true })
 }
@@ -226,14 +267,5 @@ export function focusIn(
     next.select()
   }
 
-  // This is a little weird, but let me try and explain: There are a few scenario's
-  // in chrome for example where a focused `<a>` tag does not get the default focus
-  // styles and sometimes they do. This highly depends on whether you started by
-  // clicking or by using your keyboard. When you programmatically add focus `anchor.focus()`
-  // then the active element (document.activeElement) is this anchor, which is expected.
-  // However in that case the default focus styles are not applied *unless* you
-  // also add this tabindex.
-  if (!next.hasAttribute('tabindex')) next.setAttribute('tabindex', '0')
-
   return FocusResult.Success
 }

packages/playground-react/components/button.tsx

@@ -0,0 +1,20 @@
+import { ComponentProps, forwardRef, ReactNode } from 'react'
+
+function classNames(...classes: (string | false | undefined | null)[]) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export let Button = forwardRef<
+  HTMLButtonElement,
+  ComponentProps<'button'> & { children?: ReactNode }
+>(({ className, ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    className={classNames(
+      'ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100 focus:outline-none',
+      className
+    )}
+    {...props}
+  />
+))

packages/playground-react/package.json

@@ -27,6 +27,6 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-flatpickr": "^3.10.9",
-    "tailwindcss": "^0.0.0-insiders.83b4811"
+    "tailwindcss": "^3.2.7"
   }
 }

packages/playground-react/pages/combinations/form.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Switch, RadioGroup, Listbox, Combobox } from '@headlessui/react'
 import { classNames } from '../../utils/class-names'
+import { Button } from '../../components/button'
 
 function Section({ title, children }) {
   return (
@@ -170,26 +171,24 @@ export default function App() {
                 {({ value }) => (
                   <>
                     <div className="relative">
-                      <span className="inline-block w-full rounded-md shadow-sm">
-                        <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5">
-                          <span className="block truncate">{value?.name?.first}</span>
-                          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                            <svg
-                              className="h-5 w-5 text-gray-400"
-                              viewBox="0 0 20 20"
-                              fill="none"
-                              stroke="currentColor"
-                            >
-                              <path
-                                d="M7 7l3-3 3 3m0 6l-3 3-3-3"
-                                strokeWidth="1.5"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              />
-                            </svg>
-                          </span>
-                        </Listbox.Button>
-                      </span>
+                      <Listbox.Button as={Button} className="w-full">
+                        <span className="block truncate">{value?.name?.first}</span>
+                        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                          <svg
+                            className="h-5 w-5 text-gray-400"
+                            viewBox="0 0 20 20"
+                            fill="none"
+                            stroke="currentColor"
+                          >
+                            <path
+                              d="M7 7l3-3 3 3m0 6l-3 3-3-3"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                        </span>
+                      </Listbox.Button>
 
                       <div className="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg">
                         <Listbox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">