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

[PWA-26] chore: pwa input focus improvement (#5507)

Browse source 
* chore: pwa dropdown input focus improvement

* chore: tab indices helper function updated and code refactor

* chore: modal tab index refactoring

* fix: PWA filters input autofocus

* chore: intake tab index updated and code refactor

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-09-06 16:21:14 +05:30 • committed by GitHub
parent c84c37805c
commit 52f78a86af
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
47 changed files with 430 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/core/components/dropdowns/module/index.tsx
View file

@ -185,6 +185,8 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
const inputRef = useRef<HTMLInputElement | null>(null);
// popper-js refs
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
// store hooks
const { isMobile } = usePlatformOS();
const { getModuleNameById } = useModule();
@ -209,10 +211,10 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
if (multiple) comboboxProps.multiple = true;
useEffect(() => {
if (isOpen && inputRef.current) {
if (isOpen && inputRef.current && !isMobile) {
inputRef.current.focus();
}
}, [isOpen]);
}, [isOpen, isMobile]);
const comboButton = (
<>

8
web/core/components/dropdowns/module/module-options.tsx
View file

@ -12,6 +12,7 @@ import { DiceIcon } from "@plane/ui";
//store
import { cn } from "@/helpers/common.helper";
import { useModule } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
//hooks
//icon
//types
@ -42,14 +43,17 @@ export const ModuleOptions = observer((props: Props) => {
// store hooks
const { workspaceSlug } = useParams();
const { getProjectModuleIds, fetchModules, getModuleById } = useModule();
const { isMobile } = usePlatformOS();
useEffect(() => {
if (isOpen) {
onOpen();
inputRef.current && inputRef.current.focus();
if (!isMobile) {
inputRef.current && inputRef.current.focus();
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isOpen]);
}, [isOpen, isMobile]);
// popper-js init
const { styles, attributes } = usePopper(referenceElement, popperElement, {