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

ExpandableTile collapsed unexpectedly when hitting Space key in an INPUT field #6314

Closed
1 of 2 tasks
flannanl opened this issue Jun 18, 2020 · 1 comment
Closed
1 of 2 tasks

Comments

@flannanl
Copy link

flannanl commented Jun 18, 2020

What package(s) are you using?

  • carbon-components
  • carbon-components-react

Detailed description

Describe in detail the issue you're having.

The ExpandableTile component collapsed unexpectedly when I hit the Space key in the TextInput component in the tile. I tried to attach onKeyDown and onKeyUp` hook to stop the event propagation, but it does not help.

Is this issue related to a specific component?

Yes. ExpandableTile component.

What did you expect to happen? What happened instead? What would you like to
see changed?

I would expect if I have form input fields in the ExpandableTile, the tile will remains expanded as I type through the form fields.

What browser are you working in?

Chrome.

What version of the Carbon Design System are you using?

carbon-components-react v7.12.0
carbon-components v10.12.0

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

This happens in IBM Cloud Console and it's already in production.

Steps to reproduce the issue

  1. Toggle the ExpandableTile to expand the tile.
  2. In the text input field, type (a Space key)

Additional information

  • Code
    stopPropagation = (e) => {
        e.stopPropagation();
    }
<ExpandableTile>
  <TileAboveTheFoldContent>
    <p className="expandable-tile-title">Some text</p>
    <p className="details-page-section-description">Some text</p>
  </TileAboveTheFoldContent>
  <TileBelowTheFoldContent>
    <TextInput id="a" onClick={this.stopPropagation} KeyUp={this.stopPropagation} KeyDown={this.stopPropagation} type="text"/>
    <TextInput id="b" onClick={this.stopPropagation} KeyUp={this.stopPropagation} KeyDown={this.stopPropagation} type="text"/>
  </TileBelowTheFoldContent>
<ExpandableTile>
  • Screenshot:

expandable-tile

  • Notes
@emyarod
Copy link
Member

emyarod commented Jul 13, 2020

do you have an alternative pattern for exposing that text input, or any more information on your use case? I discussed this with our designers and it seems that placing form inputs within expandable tiles is generally not recommended

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants