strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix safari layout shift

Browse Source
This commit is contained in:
Sam Becker 2024-02-04 18:51:01 -06:00
parent b45355c951
commit 376c72ff30
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/TagInput.tsx
View File

@ -65,7 +65,8 @@ export default function TagInput({
}, [onChange, selectedOptions]);
const removeOption = useCallback((option: string) => {
onChange?.(selectedOptions.filter(o => o !== option).join(','));
onChange?.(selectedOptions.filter(o =>
o !== parameterize(option)).join(','));
setSelectedOptionIndex(undefined);
inputRef.current?.focus();
}, [onChange, selectedOptions]);
@ -159,7 +160,7 @@ export default function TagInput({
return (
<div
ref={containerRef}
className="w-full"
className="flex flex-col w-full"
onFocus={() => setHasFocus(true)}
onBlur={e => {
if (!e.currentTarget.contains(e.relatedTarget)) {
@ -170,7 +171,7 @@ export default function TagInput({
>
<div className={clsx(
className,
'w-full control !py-2',
'w-full control !px-2 !py-2',
'inline-flex flex-wrap items-center gap-2',
readOnly && 'cursor-not-allowed',
readOnly && 'bg-gray-100 dark:bg-gray-900 dark:text-gray-400',
@ -208,12 +209,12 @@ export default function TagInput({
/>
<input type="hidden" name={name} value={value} />
</div>
<div className="relative min-h-0">
<div className="relative">
<div
ref={optionsRef}
className={clsx(
!(hasFocus && optionsFiltered.length > 0) && 'hidden',
'control absolute top-0 mt-4 w-full z-10 !px-1.5 !py-1.5',
'control absolute top-0 mt-3 w-full z-10 !px-1.5 !py-1.5',
'max-h-[8rem] overflow-y-auto',
'flex flex-col gap-y-1',
'text-xl shadow-lg dark:shadow-xl',