question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. Itย collects links to all the places you might be looking at while hunting down a tough bug.

And, if youโ€™re still stuck at the end, weโ€™re happy to hop on a call to see how we can help out.

Pressing [ENTER] on any input inside <form> element will toggle Downshift

See original GitHub issue
  • downshift version: 1.16.1
  • npm (or yarn) version: npm 5.5.1

Relevant code or config

const App = () => (
  <form>
    <input type='text'/>
    <Downshift>
      {({isOpen, getButtonProps}) => (
        <div>
          <button {...getButtonProps()}>
            ay
          </button>
          {isOpen &&
            <div>
              Yo wassup
            </div>
          }
        </div>
      )}
    </Downshift>
  </form>
);

What you did: Pressing [ENTER] on any input inside <form> element

What happened: It will toggle Downshift content

What do I expect: It wonโ€™t toggle the Downshift component when pressing [ENTER] inside form element.

Reproduction repository: https://codesandbox.io/s/pwn92r9plx

Suggested solution: I havenโ€™t checked on the โ€œwhyโ€ yet. Adding here first so I wonโ€™t forget it. ๐Ÿ˜ƒ

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:12 (9 by maintainers)

github_iconTop GitHub Comments

24reactions
kentcdoddscommented, Jan 29, 2018

๐Ÿ†•๐Ÿฅโ˜ First Timers Only This issue is reserved for people who never contributed to Open Source before. We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you ๐Ÿ’

About First Timers Only.

๐Ÿค” What you will need to know Nothing. This issue is meant to welcome you to Open Source ๐Ÿ˜ƒ We are happy to walk you trough the process.

๐Ÿ“‹ Step by Step

  • ๐Ÿ™‹ Claim this issue: Comment below Please ๐Ÿ™ only claim if you want to start working on it within a day.
  • ๐Ÿ‘“ Please review our Code of Conduct In a nutshell: be patient and actively kind with us ๐Ÿ˜Š
  • ๐Ÿ“ Update the file downshift.js in the this repo by following the steps in the CONTRIBUTING.md guide. Please add type: 'button' above this line.
  • ๐Ÿ”€ Start a Pull Request. Include the text closes #315 in the description. If this is your first, welcome ๐ŸŽ‰ ๐Ÿ˜„ Here is a great tutorial on how to send a pull request using the terminal.
  • ๐Ÿ Done ๐Ÿ‘ Wait patiently for someone to review your PR and provide feedback ๐Ÿ˜ƒ

๐Ÿค”โ“ Questions? Comment here ๐Ÿ˜ƒ

4reactions
kentcdoddscommented, Jan 29, 2018

Congratulations @xutopia!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Allow Downshift useCombobox to select items not in the list
You need to take control of item selection: const { isOpen, selectItem, getToggleButtonProps, ... } Then call selectItem in an onClickย ...
Read more >
Building accessible components with Downshift
Downshift is a JavaScript library for building flexible, enhanced input components in React that comply with WAI-ARIA regulations.
Read more >
Props used in examples - Downshift
A combobox element can be created with HTML elements such as a: label, ul, li, button, input and a div or something similar...
Read more >
Examples - Final Form Docs
Demonstrates how to make an independent Error component, using Hooks, to subscribe to and display the error for any form field. Loading and...
Read more >
Keyboard shortcuts for Access - Microsoft Support
Switch to the Form View from the form in the Design View. F5. Move to the next or previous field ... Every command...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found