Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Dropdown, ComboBox): adds listener to open/close menu on enter #3862

Merged
merged 7 commits into from
Aug 29, 2019
Merged

fix(Dropdown, ComboBox): adds listener to open/close menu on enter #3862

merged 7 commits into from
Aug 29, 2019

Conversation

abbeyhrt
Copy link
Contributor

Closes #2823

Components using Downshift, like Dropdown and ComboBox, were not opening on enter, this adds toggleMenu from Downshift to toggle the menu when isOpen changes.

*Note: this problem also affects MultiSelect, since it uses Downshift but is more complicated to fix. I've made an issue (#3861) and will work on a solution for that separately.

Changelog

Changed

  • add toggleMenu and onKeydown listener to ListBox.Field to toggleMenu on enter

Testing / Reviewing

Go to ComboBox and Dropdown, tab into them and make sure they toggle open/close with Enter press.

@netlify
Copy link

netlify bot commented Aug 29, 2019

Deploy preview for the-carbon-components ready!

Built with commit f17071b

https://deploy-preview-3862--the-carbon-components.netlify.com

@netlify
Copy link

netlify bot commented Aug 29, 2019

Deploy preview for carbon-components-react ready!

Built with commit d45fac4

https://deploy-preview-3862--carbon-components-react.netlify.com

@netlify
Copy link

netlify bot commented Aug 29, 2019

Deploy preview for carbon-elements ready!

Built with commit d45fac4

https://deploy-preview-3862--carbon-elements.netlify.com

@abbeyhrt abbeyhrt requested review from dakahn and a team August 29, 2019 16:42
@ghost ghost requested review from jnm2377 and removed request for a team August 29, 2019 16:42
@netlify
Copy link

netlify bot commented Aug 29, 2019

Deploy preview for carbon-components-react ready!

Built with commit f17071b

https://deploy-preview-3862--carbon-components-react.netlify.com

@netlify
Copy link

netlify bot commented Aug 29, 2019

Deploy preview for carbon-elements ready!

Built with commit f17071b

https://deploy-preview-3862--carbon-elements.netlify.com

Copy link
Contributor

@jnm2377 jnm2377 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🎉

@@ -12,6 +12,8 @@ import React from 'react';
import { settings } from 'carbon-components';
import { WarningFilled16 } from '@carbon/icons-react';
import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
import { match } from '../../internal/keyboard/match';
import * as keys from '../../internal/keyboard/keys';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we simplify this to be import { match, keys } from '../../internal/keyboard';?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah for sure, made the change!

@@ -12,6 +12,8 @@ import React from 'react';
import { settings } from 'carbon-components';
import { WarningFilled16 } from '@carbon/icons-react';
import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
import { match } from '../../internal/keyboard/match';
import * as keys from '../../internal/keyboard/keys';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

Copy link
Collaborator

@tw15egan tw15egan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tiny style nits for consistency otherwise looks great! 👍✅

@tw15egan tw15egan merged commit 711517f into carbon-design-system:master Aug 29, 2019
@jnm2377 jnm2377 mentioned this pull request Sep 4, 2019
17 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

AVT 2 - React Dropdown - Enter key does not expand and collapse the list
4 participants