Fix forms for Tailwind 4

src/components/FieldSetWithStatus.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { LegacyRef } from 'react';
+import { Ref } from 'react';
 import { useFormStatus } from 'react-dom';
 import Spinner from './Spinner';
 import { clsx } from 'clsx/lite';
 import { FieldSetType, AnnotatedTag } from '@/photo/form';
 import TagInput from './TagInput';
+import { FiChevronDown } from 'react-icons/fi';
 
 export default function FieldSetWithStatus({
   id,
@@ -44,7 +45,7 @@ export default function FieldSetWithStatus({
   readOnly?: boolean
   capitalize?: boolean
   type?: FieldSetType
-  inputRef?: LegacyRef<HTMLInputElement>
+  inputRef?: Ref<HTMLInputElement>
   accessory?: React.ReactNode
   hideLabel?: boolean
 }) {
@@ -89,28 +90,37 @@ export default function FieldSetWithStatus({
         </label>}
       <div className="flex gap-2">
         {selectOptions
-          ? <select
+          ? <div className="relative w-full">
-            id={id}
+            <select
-            name={id}
+              id={id}
-            value={value}
+              name={id}
-            onChange={e => onChange?.(e.target.value)}
+              value={value}
-            className={clsx(
+              onChange={e => onChange?.(e.target.value)}
-              'w-full',
+              className={clsx(
-              clsx(Boolean(error) && 'error'),
+                'w-full',
-              // Use special class because `select` can't be readonly
+                clsx(Boolean(error) && 'error'),
-              readOnly || pending && 'disabled-select',
+                // Use special class because `select` can't be readonly
-            )}
+                readOnly || pending && 'disabled-select',
-          >
+              )}
-            {selectOptionsDefaultLabel &&
+            >
-              <option value="">{selectOptionsDefaultLabel}</option>}
+              {selectOptionsDefaultLabel &&
-            {selectOptions.map(({ value: optionValue, label: optionLabel }) =>
+                <option value="">{selectOptionsDefaultLabel}</option>}
-              <option
+              {selectOptions.map(({ value: optionValue, label: optionLabel }) =>
-                key={optionValue}
+                <option
-                value={optionValue}
+                  key={optionValue}
-              >
+                  value={optionValue}
-                {optionLabel}
+                >
-              </option>)}
+                  {optionLabel}
-          </select>
+                </option>)}
+            </select>
+            <div className={clsx(
+              'absolute top-0 right-3 z-10 pointer-events-none',
+              'flex h-full items-center',
+              'text-extra-dim text-2xl',
+            )}>
+              <FiChevronDown />
+            </div>
+          </div>
           : tagOptions
             ? <TagInput
               id={id}

src/components/TagInput.tsx

@@ -226,8 +226,8 @@ export default function TagInput({
         className={clsx(
           className,
           'w-full control px-2! py-2!',
-          'outline-1 outline-blue-600',
+          '-outline-offset-2 outline-blue-600',
-          'group-focus-within:outline group-active:outline',
+          'group-focus-within:outline-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',
@@ -259,7 +259,7 @@ export default function TagInput({
           type="text"
           className={clsx(
             'grow min-w-0! p-0! -my-2 text-xl',
-            'border-none! ring-transparent!',
+            'outline-hidden border-none',
             'placeholder:text-dim placeholder:text-[14px]',
             'placeholder:translate-x-[2px]',
             'placeholder:translate-y-[-1.5px]',

tailwind.css

@@ -207,6 +207,8 @@
     @apply
       text-[1rem] /* Prevent iOS auto-zoom behavior */
       read-only:cursor-default
+      outline-blue-600 ring-blue-600 appearance-none
+      focus:outline-2 -outline-offset-2 focus:ring-0
   }
   input[type=text], input[type=email], input[type=password], select {
     @apply