Fix selection for controlled combobox

[arackaf]

Here's the context. In the existing Storybook, go to combobox controlled (third one). Then repeatedly type in the box, and select something. Occasionally (roughly 1 in 5 times) you'll see the text of the thing you select flash in the input, before being cleared. To make this more pronounced, and easier to see, edit this code:

    case SELECT_WITH_CLICK:
      return {
        ...nextState,
        value: event.value,
        navigationValue: null,
      };

to this

    case SELECT_WITH_CLICK:
      return {
        ...nextState,
        value: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        navigationValue: null,
      };

This PR fixes that, by changing the value to null when the combobox is used in controlled mode.

---

Thank you for contributing to Reach UI! Please fill in this template before submitting your PR to help us process your request more quickly.

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code (Compile and run).
• Add or edit tests to reflect the change (Run with yarn test).
• Add or edit Storybook examples to reflect the change (Run with yarn start).
• Ensure formatting is consistent with the project's Prettier configuration.
• Add documentation to support any new features.

This pull request:

• Creates a new package
• Fixes a bug in an existing package
• Adds additional features/functionality to an existing package
• Updates documentation or example code
• Other

If creating a new package:

• Make sure the new package directory contains each of the following, and that their structure/formatting mirrors other related examples in the project:
  • examples directory
  • src directory with an index.tsx entry file
  • At least one example file per feature introduced by the new package
  • Base styles in a style.css file (if needed by the new package)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 43e4d0c:

Sandbox	Source
reach-ui-template	Configuration

[chaance]

Is there a reason we need new state for this? Could we not store this as a ref instead as we do lower in the tree? I don't believe we ever need it for rendering.

let isControlledRef = React.useRef(false);

// in ComboboxInput:
let isControlled = controlledValue != null;

React.useEffect(() => {
  isControlledRef.current = isControlled;
}, [isControlled]);

// In ComboboxOption:
let { isControlledRef } = React.useContext(ComboboxContext);
let handleClick = () => {
  onSelect && onSelect(value);
  transition(SELECT_WITH_CLICK, { value, isControlled: isControlledRef.current });
};

[arackaf]

@chaance that's exactly what I did originally, but decided to go with state, since setting that ref would not trigger a re-render, so I figured state would be more safe.

It would almost certainly work either way though. If you think a ref would be better I could change to that.

[arackaf]

@chaance ok I've got it ref based now. I'm putting just the boolean in context, as opposed to the ref itself. If you'd like me to remove the updater function, and just store the ref object, lemme know and I will.

[chaance]

Thanks for the changes, looks good 👍