From 3987c92901100687af560155d7bc792c49dce558 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 9 Mar 2023 13:04:30 +0100 Subject: [PATCH] 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. --- packages/@headlessui-react/src/utils/focus-management.ts | 9 --------- packages/@headlessui-vue/src/utils/focus-management.ts | 9 --------- 2 files changed, 18 deletions(-) diff --git a/packages/@headlessui-react/src/utils/focus-management.ts b/packages/@headlessui-react/src/utils/focus-management.ts index 18b1a68522..fb4fe517ad 100644 --- a/packages/@headlessui-react/src/utils/focus-management.ts +++ b/packages/@headlessui-react/src/utils/focus-management.ts @@ -273,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 `` 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 } diff --git a/packages/@headlessui-vue/src/utils/focus-management.ts b/packages/@headlessui-vue/src/utils/focus-management.ts index 44832cbc5b..0b68f7dda3 100644 --- a/packages/@headlessui-vue/src/utils/focus-management.ts +++ b/packages/@headlessui-vue/src/utils/focus-management.ts @@ -267,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 `` 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 }