diff --git a/common/changes/@itwin/components-react/tool-settings-tab_2025-02-25-22-44.json b/common/changes/@itwin/components-react/tool-settings-tab_2025-02-25-22-44.json new file mode 100644 index 00000000000..1727e0eea36 --- /dev/null +++ b/common/changes/@itwin/components-react/tool-settings-tab_2025-02-25-22-44.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@itwin/components-react", + "comment": "Fix an issue which prevented tabbing through editor containers.", + "type": "none" + } + ], + "packageName": "@itwin/components-react" +} \ No newline at end of file diff --git a/docs/changehistory/NextVersion.md b/docs/changehistory/NextVersion.md index 975191bc40e..37322388ae6 100644 --- a/docs/changehistory/NextVersion.md +++ b/docs/changehistory/NextVersion.md @@ -3,6 +3,8 @@ - [@itwin/appui-react](#itwinappui-react) - [Additions](#additions) - [Changes](#changes) +- [@itwin/components-react](#itwincomponents-react) + - [Fixes](#fixes) - [@itwin/core-react](#itwincore-react) - [Changes](#changes-1) @@ -17,6 +19,12 @@ - Updated `cursorPromptTimeout` prop of `ToolAssistanceField` component to handle `Number.POSITIVE_INFINITY`, which when enabled will display the cursor prompt indefinitely. [#1211](https://github.com/iTwin/appui/pull/1211) +## @itwin/components-react + +### Fixes + +- Fixed an issue that unintentionally disabled tab navigation for tool settings. [#1236](https://github.com/iTwin/appui/pull/1236) + ## @itwin/core-react ### Changes diff --git a/ui/components-react/src/components-react/editors/EditorContainer.tsx b/ui/components-react/src/components-react/editors/EditorContainer.tsx index 28c96de0028..bfc20a9ad8b 100644 --- a/ui/components-react/src/components-react/editors/EditorContainer.tsx +++ b/ui/components-react/src/components-react/editors/EditorContainer.tsx @@ -115,6 +115,7 @@ export function EditorContainer(props: EditorContainerProps) { const editorRef = React.useRef(); const propertyEditorRef = React.useRef(); + const committedByTab = React.useRef(false); const handleClick = (e: React.MouseEvent) => { onClick?.(); @@ -148,8 +149,8 @@ export function EditorContainer(props: EditorContainerProps) { const onPressTab = (e: React.KeyboardEvent) => { if (!propertyEditorRef.current?.containerHandlesTab) return; e.stopPropagation(); - e.preventDefault(); void handleContainerCommit(); + committedByTab.current = true; }; const handleKeyDown = (e: React.KeyboardEvent) => { @@ -170,6 +171,11 @@ export function EditorContainer(props: EditorContainerProps) { }; const handleEditorBlur = () => { + // Avoid double commit when tabbing. + if (committedByTab.current) { + committedByTab.current = false; + return; + } if (ignoreEditorBlur) return; if (!propertyEditorRef.current?.containerHandlesBlur) return; void handleContainerCommit();