Detailed description

Describe in detail the issue you're having. Is this a feature request (new component, new icon), a bug, or a general issue?

Is this issue related to a specific component?

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

What browser are you working in?

What version of the Carbon Design System are you using?

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

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Additional information

• Screenshots or code
• Notes

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized. This will help us to better understand and address your issue.

I have added this line to my package.json:
"build-css": "node-sass --include-path node_modules node_modules/carbon-addons-beta-react/scss --output src/css"

when I run npm run build-css

I am getting this error:

{
"status": 1,
"file": "/Users/dcostant/Documents/ResourceGroupManager/node_modules/carbon-addons-beta-react/scss/components/Typeahead/_typeahead.scss",
"line": 36,
"column": 14,
"message": "no mixin named button-reset\n\nBacktrace:\n\tnode_modules/carbon-addons-beta-react/scss/components/Typeahead/_typeahead.scss:36, in mixin @content\n\tnode_modules/carbon-components/scss/globals/scss/_import-once.scss:12, in mixin exports\n\tnode_modules/carbon-addons-beta-react/scss/components/Typeahead/_typeahead.scss:6",
"formatted": "Error: no mixin named button-reset\n\n Backtrace:\n \tnode_modules/carbon-addons-beta-react/scss/components/Typeahead/_typeahead.scss:36, in mixin @content\n \tnode_modules/carbon-components/scss/globals/scss/_import-once.scss:12, in mixin exports\n \tnode_modules/carbon-addons-beta-react/scss/components/Typeahead/_typeahead.scss:6\n on line 36 of node_modules/carbon-addons-beta-react/scss/components/Typeahead/_typeahead.scss\n>> @include button-reset(false);\n -------------^\n"
}

Am I missing something?

To do

• Get spacebar working with the faux-focus states downshift provides
• Figure out what the inputValue state should swap to on a filterable multi-select combobox.
• Figure out what should be allowed for an uncontrolled multi-select

Overview

Well I'm leaving! Sorry :) I'm pushing up my multi-select branch

Some major caveats

• Multi-select currently requires the user to control the Typeahead component, there are a couple of methods and state that I'm adding in. I've abstracted add/remove items, but there's a couple things that's being controlled
  • isOpen (requiring a toggleMenu and handleStateChange)
  • selectedItems (requiring a handleChange)
• Spacebar is currently not working with the checkboxes (enter works though, but resets focus back to the label)

In the ideal world, we handle some of these in the component itself for people who simply want uncontrolled checkboxes, but I wager that the actual use case runs along these lines more often that not.

It looks like the below, more or less

state = {
  isOpen: false,
  selectedItems: [],
};

handleChange = item => {
  const { selectedItems } = this.state;
  if (selectedItems.includes(item)) {
    this.removeItem(item);
  } else {
    this.addItem(item);
  }
};

handleStateChange = changes => {
  const { isOpen, type } = changes;
  if (type === Downshift.stateChangeTypes.mouseUp) {
    this.setState({ isOpen });
  }
};

handleToggleMenu = () => {
  this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
};

addItem = item => {
  this.setState(({ selectedItems }) => ({
    selectedItems: [...selectedItems, item],
  }));
};
removeItem = item => {
  this.setState(({ selectedItems }) => {
    return {
      selectedItems: selectedItems.filter(i => i !== item),
    };
  });
};

Steps to reproduce:

1. Type in the component
2. Click on an item

Result:
Items in list go away, but a large white box remains where the items used to be.

Expected behavior:
The white box collapses when the typeahead closes and the items go away.

Note: Clicking on the close button multiple times will eventually make the white box disappear.

Steps to reproduce:

1. Click on the Typeahead to give it focus
2. Type some text

Result:
The Typeahead input displays an "X" icon to the left of the close icon.

Expected behavior:
After completing the steps above, only the close icon is displayed

Note:
If you click anywhere to remove focus from the Typeahead component, the "X" goes away

Detailed description

Describe in detail the issue you're having. Is this a feature request (new component, new icon), a bug, or a general issue?
A general issue

Is this issue related to a specific component?
yes

What did you expect to happen? What happened instead? What would you like to see changed?
clear button have an associated label

What browser are you working in?
Chrome

Additional information

Detailed description

Describe in detail the issue you're having. Is this a feature request (new component, new icon), a bug, or a general issue?

The Typeahead is missing aria-autocomplete and aria-expanded.

Is this issue related to a specific component?

Typeahead

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

Typeahead should have all the aria values assigned so the there are no A11Y errors.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

"carbon-addons-beta-react": "1.3.2",

Steps to reproduce the issue

1. Use Typeahead and it will have errors related to missing aria-autocomplete and aria-expanded

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized. This will help us to better understand and address your issue.
bug

Firefox:

Safari:

IE11: