Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fabric] Implement onFocus and onBlur #11276

Merged
merged 5 commits into from
Feb 23, 2023

Conversation

acoates-ms
Copy link
Contributor

@acoates-ms acoates-ms commented Feb 23, 2023

Description

Implements onFocus and onBlur for fabric. This adds the events to the ViewProps, ViewEventEmitter structures.

Minor fix to add logic to clear the focused component when a component is removed from the tree. (fixes a crash on reload)
Minor fix to fix an issue where updates to borderColor do not by themselves update the border.

Testing

This UI now shows the focus as it moves around when using tab/shift+tab.

const FocusableViewThingy = () => {
  const [isFocused, setIsFocused] = React.useState<boolean>(false);

  return (
    <View
      style={{
        backgroundColor: isFocused ? 'red' : 'green',
        width: 50,
        height: 50,
      }}
      focusable={true}
      onFocus={() => setIsFocused(true)}
      onBlur={() => setIsFocused(false)}
    />
  );
};

export default class Bootstrap extends React.Component {
  render() {
    return (
      <View accessible={true}>
        <FocusableViewThingy />
        <FocusableViewThingy />
        <FocusableViewThingy />
        <FocusableViewThingy />
      </View>
    );
  }
}

AppRegistry.registerComponent('Bootstrap', () => Bootstrap);
Microsoft Reviewers: Open in CodeFlow

@acoates-ms acoates-ms requested a review from a team as a code owner February 23, 2023 18:14
@microsoft-github-policy-service microsoft-github-policy-service bot added Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) and removed Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) labels Feb 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

None yet

2 participants