Please refer to the code sandbox example here
In elastic/elastic-charts#1272, I'm trying to restore focus back to the legend icon after closing the color picker with the keyboard exclusively. So hitting enter on the legend dot icon opens the color picker, and then I can tab through the various parts of the color picker and interact with it using keys. If I hit the escape key, the color picker closes, and focus is correctly returned to the legend icon.
However, when I hit enter on the Done button in the example code below, focus does not return to the legend icon. This does work as expected when using EuiPopover instead of EuiWrappingPopover.
const CustomColorPicker: LegendColorPicker = useMemo(
() => ({ anchor, color, onClose, seriesIdentifiers, onChange }) => {
const handleClose = () => {
onClose();
anchor.focus();
setColors((prevColors) => ({
...prevColors,
...toEntries(seriesIdentifiers, 'key', color),
}));
};
const handleChange = (c: Color | null) => {
setColors((prevColors) => ({
...prevColors,
...toEntries(seriesIdentifiers, 'key', c),
}));
onChange(c);
onChangeAction(c);
};
return (
<>
<EuiWrappingPopover isOpen button={anchor} closePopover={handleClose} anchorPosition="leftCenter">
<EuiColorPicker display="inline" color={color} onChange={handleChange} />
<EuiSpacer size="m" />
<EuiFlexItem grow={false}>
<EuiButtonEmpty size="s" onClick={() => handleChange(null)}>
Clear color
</EuiButtonEmpty>
</EuiFlexItem>
<EuiButton fullWidth size="s" onClick={handleClose}>
Done
</EuiButton>
</EuiWrappingPopover>
</>
);
},
[setColors],
);The above example color picker does not properly return focus after hitting enter on the done button. However, if we switch the component EuiWrappingPopover to EuiPopover, the focus is returned.
Please refer to the code sandbox example here
In elastic/elastic-charts#1272, I'm trying to restore focus back to the legend icon after closing the color picker with the keyboard exclusively. So hitting enter on the legend dot icon opens the color picker, and then I can tab through the various parts of the color picker and interact with it using keys. If I hit the escape key, the color picker closes, and focus is correctly returned to the legend icon.
However, when I hit enter on the Done button in the example code below, focus does not return to the legend icon. This does work as expected when using EuiPopover instead of EuiWrappingPopover.
The above example color picker does not properly return focus after hitting enter on the done button. However, if we switch the component
EuiWrappingPopovertoEuiPopover, the focus is returned.