🐛 Bug report

Current Behavior

a tiny bug when trying to import matchSorter as default "Attempted import error: 'match-sorter' does not contain a default export "

Expected behavior

...

Reproducible example

CodeSandbox Template

Suggested solution(s)

solved when imported as not default

Additional context

Your environment

<!-- PLEASE FILL THIS OUT -->

@Ali-Hussein-dev match-sorter is an external library, not part of Reach UI. I would direct all issues/bugs to that library's GitHub. It does look like a recent change tagged as V5.0.0 switched the default export to a named export.

If you focus the combobox input, shouldn't the openOnFocus prop display the popover without the user needing to type?

The larger issue here is that by the WAI ARIA spec—that Reach components aim to comply to—the popup is hidden by default and only displays when it is triggered to do so, i.e. some event needs to happen.

The popup is hidden by default, i.e., the default state is collapsed. The conditions that trigger expansion -- display of the popup --are specific to each implementation. Some possible conditions that trigger expansion include:

• It is displayed when the Down Arrow key is pressed or the Open button is activated. Optionally, if the combobox is editable and contains a string that does not match an allowed value, expansion does not occur.
• It is displayed when the combobox receives focus even if the combobox is editable and empty.
• If the combobox is editable, the popup is displayed only if a certain number of characters are typed in the combobox and those characters match some portion of one of the suggested values.

The part that I was referencing was under the ComboboxList persistSelection section

I think the docs wording in its description of Combobox acting like a select here is a bit confusing. As far as persistSelection renders Combobox similar to select, it is only with regards to: "if an option's value matches the value in the input, it will automatically be highlighted and be the starting point for any keyboard navigation of the list" (source). Similar to the behavior of opening the options list on a native select using the arrow keys.

<img src="https://user-images.githubusercontent.com/3409645/95390558-6eb8cf00-08aa-11eb-93f5-3991425d8b23.gif" width="50%" />

Thanks for the deeper explanation of what you're trying to build, the gif is helpful. Unfortunately, I'm struggling to consider a good implementation of this feature using a combobox, particularly because the full input value here is not determining the contents of the listbox, only the value after /.

One idea could be to create a combobox that's absolutely positioned within the outer input and only displays after e.g. / shows up. You could focus the combobox input as soon as it renders and use the openOnFocus prop to display the results list immediately, and unmount the combobox as soon as an option is selected. The challenges here would be: a) knowing when to mount/unmount the nestled combobox and b) managing focus via refs between the combobox input and outer input on combobox mount/unmount.

I'd be curious if folks have other ideas to help here, but I'm guessing it would be difficult to implement that Notion feature using a combobox.

@dstaley this is an issue with the docs example. If you update it to look like the following it should work as expected.

+ const AnimatedDialogOverlay = animated(DialogOverlay);
+ const AnimatedDialogContent = animated(DialogContent);
+
function Example(props) {
- const AnimatedDialogOverlay = animated(DialogOverlay);
- const AnimatedDialogContent = animated(DialogContent);
  const [showDialog, setShowDialog] = React.useState(false);
  const transitions = useTransition(showDialog, null, {
    from: { opacity: 0, y: -10 },
    enter: { opacity: 1, y: 0 },
    leave: { opacity: 0, y: 10 },
  });
  return (
    <div>
      <button onClick={() => setShowDialog(true)}>Show Dialog</button>
      {transitions.map(
        ({ item, key, props: styles }) =>
          item && (
-           <AnimatedDialogOverlay style={{ opacity: styles.opacity }}>
+           <AnimatedDialogOverlay style={{ opacity: styles.opacity }} key={key}>
              <AnimatedDialogContent
                style={{
                  transform: styles.y.interpolate(
                    value => `translate3d(0px, ${value}px, 0px)`
                  ),
                  border: "4px solid hsla(0, 0%, 0%, 0.5)",
                  borderRadius: 10,
                }}
              >
                <button onClick={() => setShowDialog(false)}>
                  Close Dialog
                </button>
                <p>React Spring makes it too easy!</p>
                <input type="text" />
                <br />
                <input type="text" />
                <button>Ayyyyyy</button>
              </AnimatedDialogContent>
            </AnimatedDialogOverlay>
          )
      )}
    </div>
  );
}

We move the AnimatedDialogOverlay and AnimatedDialogContent out of the render cycle, and we make sure to include our key prop on the transitions we map over.

Some of the example snippets are a bit outdated or contain small bugs like this. Thanks for finding this one! We would love your help updating them if you come across other issues. Would you be interested in creating a PR to update the animation docs to fix the snippet? 🙂

Hey @higimo! Can you provide a bit more detail on what your issue is and what you expect the behavior to be?

By the looks of the snippet you included (and your CodeSandbox), you've included the onChange and value prop on the Combobox component, but you'll want to put those on the input, same as you would with a native React input. Check out the Combobox docs for more details on the props for the different parts of this compound component.

<Combobox
	openOnFocus
-       onChange={event => setValue(event.target.value)}
	onSelect={item => setValue(item)}
-       value={know}
>
	<ComboboxInput
		placeholder="placeholder"
		autocomplete
		className="input"
+               onChange={event => setValue(event.target.value)}
+               value={know}
	/>
	<ComboboxPopover>
		<ComboboxList>
			<ComboboxOption value="Hello" />
			<ComboboxOption value="Biiiig" />
		</ComboboxList>
	</ComboboxPopover>
</Combobox>

Hey @ashwinKumar0505! I'm not sure I understand what the issue is that you're describing, could you create an example of your problem using the CodeSandbox template please?

Hey @travigd!

I'd like a way to show the list unconditionally (I'm using the combobox as an extra-interactive select component so it makes sense to always show all the options)

Can you explain your use-case here a bit further, and what you mean by an "extra-interactive <select />"? If you'd like the always show all the options, perhaps the MenuButton or Listbox would suit your situation better?

Useful for people who are using Combobox as extra-interactive <select /> component (which is mentioned as a use case in the docs)

Can you link to which docs you are referring to? The Reach docs on Combobox mention "don't think of it like a <select/>, but more of an <input type="text"/> with some suggestions".

@frontsideair thanks for your PR contribution!

The issue with your test seems to be the use of queryByTestId. Using ByTestId is not recommended if there are other queries more inline with how the software is used by people or screen readers. We can use ByRole for most things associated with Combobox, and indeed your tests pass with these query selectors.

Given #395 also cares about the event propagating, we should also assert that our dialog remains open when escape is pressed. Perhaps something like this:

it("should not close the dialog when Esc key is pressed", async () => {
  let { getByRole, queryByRole } = render(<BasicDialog />);
  let input = getByRole("combobox");

  expect(getByRole("dialog")).toBeInTheDocument();

  await userEvent.type(input, "e");

  expect(getByRole("listbox")).toBeInTheDocument();

  await userEvent.type(input, "{esc}");

  // escape should close our listbox
  expect(queryByRole("listbox")).not.toBeInTheDocument();

  // but our dialog should still be open
  expect(queryByRole("dialog")).toBeInTheDocument();
});

Reach wraps event handlers on most components so that you can still make use of them at an application level. Have you considered using a controlled Tabs component and adding your own onKeyDown handler to achieve the functionality you want?

function TabsExample() {
  const [tabIndex, setTabIndex] = useState(0);

  return (
    <div>
      <Tabs
        index={tabIndex}
        onChange={(index) => {
          setTabIndex(index);
        }}
      >
        <TabList
+         onKeyDown={(e) => {
+           if (e.key === "h") {
+             setTabIndex(previousTab);
+           }
+
+           if (e.key === "l") {
+             setTabIndex(nextTab);
+           }
+         }}
        >
          <Tab>One</Tab>
          <Tab>Two</Tab>
          <Tab>Three</Tab>
        </TabList>
        <TabPanels>
          <TabPanel><p>First Tab</p></TabPanel>
          <TabPanel><p>Second Tab</p></TabPanel>
          <TabPanel><p>Third Tab</p></TabPanel>
        </TabPanels>
      </Tabs>
    </div>
  );
}

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

This may be considered a duplicate of #1959 but that issue was closed without resolution.

Reproduction link

NOTE: this will not work without the component being server rendered, so JSFiddle isn't going to show a reproduction.

https://jsfiddle.net/alidingling/9km41z5z/

Steps to reproduce

Hard refresh any page using a rechart chart (e.g. RadialBarChart or ScatterChart) that is server rendered.

What is expected?

id props on elements within chart components should match between server and client renders

What is actually happening?

id props mismatch between server and client renders. Get a console warning something like

Warning: Prop `id` did not match. Server: "recharts16-clip" Client: "recharts1-clip"

<!-- generated by reccharts-issue-helper. DO NOT REMOVE -->

For those looking for the file it can be found here: https://github.com/dense-analysis/ale/blob/5eda1df0a96e691ebf24e5d8a3585c2feb2a48a3/autoload/ale/lsp_linter.vim#L53

And to highlight the changes @thisjeremiah made:

function! s:HandleTSServerDiagnostics(response, error_type) abort
    let l:linter_name = 'tsserver'

    let l:buffer = bufnr('^' . a:response.body.file . '$')

+   if l:buffer == -1
+     let l:buffer = 1
+   endif

Many ALE users are likely to encounter this issue as bracket files names are how the popular framework Next.js handles dynamic routing.

If I have an element like this

<div class="h3 w4 bg-blue ma3 br2 br--left-ns br--top"></div>

It ends up looking like this on desktop

But what I really want is this

desktop	mobile

I only see classes to change border-radius of top/right/bottom/left but not individual corners. Is there some other way of getting what I want that I'm overlooking short of adding my own classes?

Love this library, have been using it on and off for years 💚

I should have specified that I understand why what I have behaves the way it does to save you the trouble of having to type that all out ha. Makes sense to re-apply the radius with br2-ns. Thanks for the help!

If I have an element like this

<div class="h3 w4 bg-blue center ma3 br2 br--left-ns br--top"></div>

It ends up looking like this on desktop

But what I really want is this

desktop	mobile

I only see classes to change border-radius of top/right/bottom/left but not individual corners. Is there some other way of getting what I want that I'm overlooking short of adding my own classes?

Love this library, have been using it on and off for years 💚