binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: dropdown and peek overview improvement (#3682)

Browse source 
* chore: dropdown focus state improvement

* fix: peek overview dropdown placement fix
This commit is contained in:
Anmol Singh Bhatia 2024-02-16 20:01:58 +05:30 • committed by GitHub
parent 85a8af5125
commit 665a07f15a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 93 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/components/issues/select/label.tsx
View file

@ -1,4 +1,4 @@
import React, { Fragment, useRef, useState } from "react";
import React, { Fragment, useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
@ -36,6 +36,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
// refs
const dropdownRef = useRef<HTMLDivElement | null>(null);
const inputRef = useRef<HTMLInputElement | null>(null);
// popper
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-start",
@ -76,6 +77,12 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
useOutsideClickDetector(dropdownRef, handleClose);
useEffect(() => {
if (isDropdownOpen && inputRef.current) {
inputRef.current.focus();
}
}, [isDropdownOpen]);
return (
<Combobox
as="div"
@ -125,6 +132,8 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
<div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
<Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
onChange={(event) => setQuery(event.target.value)}
placeholder="Search"