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

ComboBox doesn't use ref now. #8744

Closed
1 of 2 tasks
Tracked by #8966
ymitchanka-gomel-iba-by opened this issue May 24, 2021 · 1 comment · Fixed by #9136
Closed
1 of 2 tasks
Tracked by #8966

ComboBox doesn't use ref now. #8744

ymitchanka-gomel-iba-by opened this issue May 24, 2021 · 1 comment · Fixed by #9136
Labels
component: combobox good first issue 👋 Used by GitHub to elevate contribution opportunities type: bug 🐛

Comments

@ymitchanka-gomel-iba-by

What package(s) are you using?

  • carbon-components
  • carbon-components-react

Detailed description

Describe in detail the issue you're having.
We are using a ref in the ComboBox component.
But now, as I right understand from March 2021, this component was rewritten from class to functional component.
We have the warning in the console about the ref and we can't use the ref in ComboBox now.

Is this issue related to a specific component?
ComboBox

What did you expect to happen? What happened instead? What would you like to
see changed?
Add ability to use a ref in ComboBox.
And the warning related to the ref should not appear.

What browser are you working in?
Chrome, Mozilla Firefox

What version of the Carbon Design System are you using?
7.35.0

Steps to reproduce the issue

  1. Add the ability to pass ref props to the ComboBox component (for example as it's done for the TextInput component
    const TextInput = React.forwardRef(function TextInput(
    ).

Additional information

image

import React from 'react';
import { render } from 'react-dom';
import { ComboBox } from 'carbon-components-react';

const items = [
  {
    id: 'option-1',
    text: 'Option 1',
  },
  {
    id: 'option-2',
    text: 'Option 2',
  }
];

const App = () => (
  <div>
    <ComboBox
      onChange={() => {}}
      id="carbon-combobox"
      items={items}
      itemToString={(item) => (item ? item.text : '')}
      placeholder="Filter..."
      titleText="ComboBox title"
      helperText="Combobox helper text"
      ref={()=>console.log('some ref here')}
    />
  </div>
);

render(<App />, document.getElementById('root'));
@davidicus
Copy link
Contributor

Definitely interested in seeing this issue resolved. The lack of ref breaks extensions that our PAL has built on top of ComboBox component. We are unable to upgrade Carbon without breaking existing applications.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: combobox good first issue 👋 Used by GitHub to elevate contribution opportunities type: bug 🐛
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants