Skip to content

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.

2 participants