diff --git a/components/Blocks/BlockCommands.tsx b/components/Blocks/BlockCommands.tsx index 4aae329d..b7abb5a5 100644 --- a/components/Blocks/BlockCommands.tsx +++ b/components/Blocks/BlockCommands.tsx @@ -24,6 +24,7 @@ import { keepFocus } from "components/Toolbar/TextBlockTypeToolbar"; import { useEditorStates } from "src/state/useEditorState"; import { elementId } from "src/utils/elementId"; import { usePollBlockUIState } from "./PollBlock"; +import { focusElement } from "components/Input"; type Props = { parent: string; @@ -212,9 +213,10 @@ export const blockCommands: Command[] = [ type: "block", onSelect: async (rep, props) => { let entity = await createBlockWithType(rep, props, "poll"); + let pollOptionEntity = v7(); await rep.mutate.addPollOption({ pollEntity: entity, - pollOptionEntity: v7(), + pollOptionEntity, pollOptionName: "", factID: v7(), permission_set: props.entity_set, @@ -227,6 +229,13 @@ export const blockCommands: Command[] = [ permission_set: props.entity_set, }); usePollBlockUIState.setState((s) => ({ [entity]: { state: "editing" } })); + setTimeout(() => { + focusElement( + document.getElementById( + elementId.block(entity).pollInput(pollOptionEntity), + ) as HTMLInputElement | null, + ); + }, 20); }, }, diff --git a/components/Blocks/PollBlock.tsx b/components/Blocks/PollBlock.tsx index a5ccf4c7..86e55eeb 100644 --- a/components/Blocks/PollBlock.tsx +++ b/components/Blocks/PollBlock.tsx @@ -2,7 +2,7 @@ import { useUIState } from "src/useUIState"; import { BlockProps } from "./Block"; import { ButtonPrimary, ButtonSecondary } from "components/Buttons"; import { useCallback, useEffect, useState } from "react"; -import { Input } from "components/Input"; +import { focusElement, Input } from "components/Input"; import { CheckTiny, CloseTiny, InfoSmall } from "components/Icons"; import { Separator } from "components/Layout"; import { useEntitySetContext } from "components/EntitySetProvider"; @@ -13,6 +13,7 @@ import { usePollData } from "components/PageSWRDataProvider"; import { voteOnPoll } from "actions/pollActions"; import { create } from "zustand"; import { poll_votes_on_entity } from "drizzle/schema"; +import { elementId } from "src/utils/elementId"; export let usePollBlockUIState = create( () => @@ -316,14 +317,21 @@ const EditPoll = (props: {