profile
viewpoint
Austin Wood indiesquidge San Francisco, CA

indiesquidge/javascript-challenges 107

A collection of JavaScript coding challenges

indiesquidge/squidgefiles 20

Beautiful dotfiles :squid:

indiesquidge/idiomatic-redux 5

Best practices for using Redux for state management

dawsbot/soundvisualizer 2

CU live sound visualization in Atlas Building

indiesquidge/autocomplete 2

low-level, primitive autocomplete using trie data structure

indiesquidge/dinner_dash 2

Commerce platform for a restaurant to facilitate online ordering.

indiesquidge/quibble 1

Socket chat application for bikeshedding

indiesquidge/tachyons-starter 1

Starter repo for Tachyons CSS with live reload

indiesquidge/bookmarker 0

A bookmark list built in Electron.js

issue closedreach/reach-ui

import error

🐛 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 -->

Software Name(s) Version
Reach Package
React true
Browser
Assistive tech
Node
npm/yarn
Operating System

closed time in 3 days

Ali-Hussein-dev

issue commentreach/reach-ui

import error

@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.

Ali-Hussein-dev

comment created time in 3 days

issue commentreach/reach-ui

Allow ComboboxPopover to be shown unconditionally

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.
travigd

comment created time in 15 days

issue commentreach/reach-ui

Allow ComboboxPopover to be shown unconditionally

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.

travigd

comment created time in 15 days

issue commentreach/reach-ui

Animated Dialog example doesn't retain focus state on dismissal

@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? 🙂

dstaley

comment created time in 15 days

issue commentreach/reach-ui

ComboboxInput Does not accept an external value

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>
higimo

comment created time in 15 days

issue commentreach/reach-ui

Combo box

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?

ashwinKumar0505

comment created time in 16 days

issue commentreach/reach-ui

Allow ComboboxPopover to be shown unconditionally

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".

travigd

comment created time in 16 days

Pull request review commentreach/reach-ui

Stop Combobox Esc propagation

 describe("<Combobox />", () => {       expect(getByTextWithMarkup(optionToSelect)).toBeInTheDocument();     });   });++  describe("Combobox inside dialog", () => {+    it("should not close the dialog when Esc key is pressed", async () => {+      let { getByTestId, queryByTestId } = render(<BasicDialog />);+      let input = getByTestId("input");++      await userEvent.type(input, "e");++      expect(getByTestId("list")).toBeInTheDocument();++      await userEvent.type(input, "{esc}");++      expect(queryByTestId("list")).not.toBeInTheDocument();

@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();
});
frontsideair

comment created time in 16 days

PullRequestReviewEvent

issue commentreach/reach-ui

Vim / Alternate Keybindings (For Tabs)

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>
  );
}
knpwrs

comment created time in 25 days

startedreach/reach-ui

started time in a month

issue openedrecharts/recharts

Prop id did not match between server and client

  • [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"
Environment Info
Recharts v1.8.5
React 16.13.1
System macOS 10.15.4
Browser Google Chrome 85.0.4183.83

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

created time in a month

push eventindiesquidge/squidgefiles

Austin Wood

commit sha 275e5a59ec9293068dcfa3ff3d9961f0dbce7fb5

Add polyglot Also update linters for ruby and graphql

view details

push time in a month

issue commentdense-analysis/ale

No linting TypeScript files on filenames with brackets

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.

thisjeremiah

comment created time in 2 months

issue closedtachyons-css/tachyons

Styling border-radius for element on desktop and mobile

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

image

But what I really want is this

desktop mobile
image image

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 💚

closed time in 3 months

indiesquidge

issue commenttachyons-css/tachyons

Styling border-radius for element on desktop and mobile

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!

indiesquidge

comment created time in 3 months

issue openedtachyons-css/tachyons

Styling border-radius for element on desktop and mobile

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

image

But what I really want is this

desktop mobile
image image

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 💚

created time in 3 months

more