Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

fix: keyboard focus error #5602

Merged
luhan2017 merged 9 commits into from
Feb 4, 2021
Merged

fix: keyboard focus error #5602

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
66eb513
keyboard move err
alanlong9278 Jan 25, 2021
40d4641
Merge branch 'main' into julong/keyboard-err
alanlong9278 Jan 25, 2021
3278a3a
lint
alanlong9278 Jan 26, 2021
9e045bc
Merge branch 'main' into julong/keyboard-err
alanlong9278 Feb 1, 2021
237f9e9
add id for div
alanlong9278 Feb 1, 2021
93add4d
lint
alanlong9278 Feb 2, 2021
d5a4ff6
Merge branch 'main' into julong/keyboard-err
alanlong9278 Feb 2, 2021
ee7e433
Merge branch 'main' into julong/keyboard-err
luhan2017 Feb 4, 2021
5a814d0
move DOM opt inside useEffect
yeze322 Feb 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Composer/packages/adaptive-flow/src/adaptive-flow-editor/components/IconMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export const IconMenu: React.FC<IconMenuProps> = ({
buttonRef.current && buttonRef.current.focus();
}
}, [nodeSelected]);

const onRenderOverflowButton: IRenderFunction<IContextualMenuItem[]> = (overflowItems) => {
if (!overflowItems) {
return null;
Expand Down
2 changes: 1 addition & 1 deletion Composer/packages/adaptive-flow/src/adaptive-flow-editor/components/KeyboardZone.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const KeyNameByModifierAttr = {
shiftKey: 'Shift',
};

const overriddenKeyCodes = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
const overriddenKeyCodes = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Tab'];

interface KeyboardCommand {
area: string;
Expand Down
11 changes: 10 additions & 1 deletion Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/NodeWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

/** @jsx jsx */
import { jsx, css } from '@emotion/core';
import { FC, useContext, useCallback } from 'react';
import { FC, useContext, useCallback, useEffect } from 'react';
import { generateActionTitle, PromptTab } from '@bfc/shared';
import { useShellApi } from '@bfc/extension-client';

Expand Down Expand Up @@ -38,6 +38,8 @@ export const ActionNodeWrapper: FC<NodeWrapperProps> = ({ id, tab, data, onEvent
const nodeFocused = focusedId === id || focusedEvent === id;
const nodeDoubleSelected = tab && nodeFocused && tab === focusedTab;
const nodeSelected = selectedIds.includes(id);
const nodeId = `action-${selectableId}`;
const actionNode = document.getElementById(nodeId);
Comment thread
alanlong9278 marked this conversation as resolved.
Outdated

const declareElementAttributes = (selectedId: string, id: string) => {
return {
Expand All @@ -58,6 +60,12 @@ export const ActionNodeWrapper: FC<NodeWrapperProps> = ({ id, tab, data, onEvent
addCoachMarkRef({ action });
}, []);

useEffect(() => {
if (nodeSelected || nodeDoubleSelected) {
actionNode?.focus();
}
}, [nodeSelected, tab, nodeDoubleSelected]);

// Set 'use-select' to none to disable browser's default
// text selection effect when pressing Shift + Click.
return (
Expand All @@ -75,6 +83,7 @@ export const ActionNodeWrapper: FC<NodeWrapperProps> = ({ id, tab, data, onEvent
}
`}
data-testid="ActionNodeWrapper"
tabIndex={0}
{...declareElementAttributes(selectableId, id)}
aria-label={generateActionTitle(data, '', '', tab)}
onClick={(e) => {
Expand Down