From ee6dee72b7612595d651ffbe69e9e1894a36ff6c Mon Sep 17 00:00:00 2001 From: Ali Hosseini Date: Tue, 11 Aug 2020 18:24:33 +0430 Subject: [PATCH] fix(v2): navbar dropdown opened with tab, not closing on click outside (#3240) * package use-onclickoutside added * fix:dropdown toggle updated and tab behavior fixed * fix:variable name and type checker on drop down updated * fix: optional chaining added to dropdown toggle function * fix: package.json problem fixed and type of element updated * fix:type problem fixed --- .../docusaurus-theme-classic/package.json | 1 + .../theme/NavbarItem/DefaultNavbarItem.tsx | 41 ++++++++++++++----- yarn.lock | 25 +++++++++++ 3 files changed, 56 insertions(+), 11 deletions(-) diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 0eb68a49b41d..6602523d71ef 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -27,6 +27,7 @@ "prop-types": "^15.7.2", "react-router-dom": "^5.1.2", "react-toggle": "^4.1.1", + "use-onclickoutside": "^0.3.1", "@docusaurus/utils-validation": "^2.0.0-alpha.61" }, "devDependencies": { diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx index 80659c6d0e3e..e1bbe0e822a1 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx @@ -5,10 +5,11 @@ * LICENSE file in the root directory of this source tree. */ -import React, {ComponentProps, ComponentType} from 'react'; +import React, {ComponentProps, ComponentType, useState} from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import useOnClickOutside from 'use-onclickoutside'; function NavLink({ activeBasePath, @@ -33,6 +34,7 @@ function NavLink({ const toUrl = useBaseUrl(to); const activeBaseUrl = useBaseUrl(activeBasePath); const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true}); + return ( (null); + const dropDownMenuRef = React.useRef(null); + const [showDropDown, setShowDropDown] = useState(false); + useOnClickOutside(dropDownRef, () => toggle(false)); + function toggle(state: boolean) { + if (state) { + const firstNavLinkOfULElement = + dropDownMenuRef?.current?.firstChild?.firstChild; + + if (firstNavLinkOfULElement) { + (firstNavLinkOfULElement as HTMLElement).focus(); + } + } + setShowDropDown(state); + } const navLinkClassNames = (extraClassName, isDropdownItem = false) => clsx( { @@ -76,32 +93,34 @@ function NavItemDesktop({items, position, className, ...props}) { return (
e.preventDefault()} onKeyDown={(e) => { - function toggle() { - ((e.target as HTMLElement) - .parentNode as HTMLElement).classList.toggle('dropdown--show'); - } - if (e.key === 'Enter' && !props.to) { - toggle(); - } - if (e.key === 'Tab') { - toggle(); + if ((e.key === 'Enter' && !props.to) || e.key === 'Tab') { + e.preventDefault(); + toggle(true); } }}> {props.label} -
    +
      {items.map(({className: childItemClassName, ...childItemProps}, i) => (
    • { + if (i === items.length - 1 && e.key === 'Tab') { + e.preventDefault(); + toggle(false); + } + }} activeClassName="dropdown__link--active" className={navLinkClassNames(childItemClassName, true)} {...childItemProps} diff --git a/yarn.lock b/yarn.lock index 4cdfbdeae7de..3a4f32a547e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4947,6 +4947,11 @@ archiver@^4.0.0: tar-stream "^2.1.2" zip-stream "^3.0.1" +are-passive-events-supported@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/are-passive-events-supported/-/are-passive-events-supported-1.1.1.tgz#3db180a1753a2186a2de50a32cded3ac0979f5dc" + integrity sha512-5wnvlvB/dTbfrCvJ027Y4L4gW/6Mwoy1uFSavney0YO++GU+0e/flnjiBBwH+1kh7xNCgCOGvmJC3s32joYbww== + are-we-there-yet@~1.1.2: version "1.1.5" resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21" @@ -21105,6 +21110,26 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-isomorphic-layout-effect@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.0.0.tgz#f56b4ed633e1c21cd9fc76fe249002a1c28989fb" + integrity sha512-JMwJ7Vd86NwAt1jH7q+OIozZSIxA4ND0fx6AsOe2q1H8ooBUp5aN6DvVCqZiIaYU6JaMRJGyR0FO7EBCIsb/Rg== + +use-latest@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.1.0.tgz#7bf9684555869c3f5f37e10d0884c8accf4d3aa6" + integrity sha512-gF04d0ZMV3AMB8Q7HtfkAWe+oq1tFXP6dZKwBHQF5nVXtGsh2oAYeeqma5ZzxtlpOcW8Ro/tLcfmEodjDeqtuw== + dependencies: + use-isomorphic-layout-effect "^1.0.0" + +use-onclickoutside@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/use-onclickoutside/-/use-onclickoutside-0.3.1.tgz#fdd723a6a499046b6bc761e4a03af432eee5917b" + integrity sha512-aahvbW5+G0XJfzj31FJeLsvc6qdKbzeTsQ8EtkHHq5qTg6bm/qkJeKLcgrpnYeHDDbd7uyhImLGdkbM9BRzOHQ== + dependencies: + are-passive-events-supported "^1.1.0" + use-latest "^1.0.0" + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"