focus on input when new webhook added

This commit is contained in:
Henry Dollman
2024-09-15 11:31:44 -04:00
parent 3aeca6af2f
commit bd43a2a2c2

View File

@@ -29,7 +29,14 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
const [emails, setEmails] = useState<string[]>(userSettings.emails ?? [])
const [isLoading, setIsLoading] = useState(false)
const addWebhook = () => setWebhooks([...webhooks, ''])
const addWebhook = () => {
setWebhooks([...webhooks, ''])
// focus on the new input
queueMicrotask(() => {
const inputs = document.querySelectorAll('#webhooks input') as NodeListOf<HTMLInputElement>
inputs[inputs.length - 1]?.focus()
})
}
const removeWebhook = (index: number) => setWebhooks(webhooks.filter((_, i) => i !== index))
const updateWebhook = (index: number, value: string) => {
@@ -112,7 +119,7 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
</p>
</div>
{webhooks.length > 0 && (
<div className="grid gap-2.5">
<div className="grid gap-2.5" id="webhooks">
{webhooks.map((webhook, index) => (
<ShoutrrrUrlCard
key={index}