fluentui
fluentui copied to clipboard
microsoft
[Feature]: focusAsync counterpart in @fluentui/react-components
Library
React Components / v9 (@fluentui/react-components)
Describe the feature that you would like added
Fluent 8 has focusAsync utility. However, there is no counterpart for it in Fluent 9. It would be great if we had similar utility. With tabster it's possible just by reusing Observed API, with additional feature of being able to focus element which have not yet apperead in DOM. I was thinking about something like:
import { useTabsterAttributes } from "@fluentui/react-tabster";
import { createTabster, getObservedElement } from "tabster";
import type { Types } from "tabster";
export const useFocusElement = (
name: string,
timeout = 1000
): {
attributes: Types.TabsterDOMAttribute;
focus: () => Types.ObservedElementAsyncRequest<boolean>;
} => {
const attributes = useTabsterAttributes({ observed: { names: [name] } });
const tabsterCore = createTabster(window); // if this was part of @fluentui/react-tabster, we could call useTabter here instead
const observedElement = getObservedElement(tabsterCore);
return {
attributes,
focus: () => observedElement.requestFocus(name, timeout),
};
};
What do you think?
Have you discussed this feature with our team
No response
Additional context
No response
Validations
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
@ling1726 what are your thoughts on this? Is this a good use for tabster?
Yeah, this is a feature request, to add observable focusing to react-tabster from the main tabster package
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links:
:tada:This issue was addressed in #28291, which has now been successfully released as @fluentui/[email protected].:tada:
Handy links: