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

8
packages/ui/src/dropdown/common/input-search.tsx
View file

@ -14,10 +14,12 @@ interface IInputSearch {
inputContainerClassName?: string;
inputClassName?: string;
inputPlaceholder?: string;
isMobile: boolean;
}
export const InputSearch: FC<IInputSearch> = (props) => {
const { isOpen, query, updateQuery, inputIcon, inputContainerClassName, inputClassName, inputPlaceholder } = props;
const { isOpen, query, updateQuery, inputIcon, inputContainerClassName, inputClassName, inputPlaceholder, isMobile } =
props;
const inputRef = useRef<HTMLInputElement | null>(null);
@ -29,10 +31,10 @@ export const InputSearch: FC<IInputSearch> = (props) => {
};
useEffect(() => {
if (isOpen) {
if (isOpen && !isMobile) {
inputRef.current && inputRef.current.focus();
}
}, [isOpen]);
}, [isOpen, isMobile]);
return (
<div
className={cn(

2
packages/ui/src/dropdown/common/options.tsx
View file

@ -26,6 +26,7 @@ export const DropdownOptions: React.FC<IMultiSelectDropdownOptions | ISingleSele
value,
renderItem,
loader,
isMobile = false,
} = props;
return (
<>
@ -38,6 +39,7 @@ export const DropdownOptions: React.FC<IMultiSelectDropdownOptions | ISingleSele
inputPlaceholder={inputPlaceholder}
inputClassName={inputClassName}
inputContainerClassName={inputContainerClassName}
isMobile={isMobile}
/>
)}
<div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">

1
packages/ui/src/dropdown/dropdown.d.ts vendored
View file

@ -85,6 +85,7 @@ export interface IDropdownOptions {
renderItem: (({ value, selected }: { value: string; selected: boolean }) => React.ReactNode) | undefined;
options: TDropdownOption[] | undefined;
loader?: React.ReactNode;
isMobile?: boolean;
}
export interface IMultiSelectDropdownOptions extends IDropdownOptions {