SearchMatSelect

This is a component made on top of the Mat Select component of the Material Angular library. The SearchMatSelect features a search box to find the avaliable options and a select all option, it as well offers keybord navigation for accessibility.

The source code is avaliable on Github and a demo is avaliable here.

1. How to...

• import to your project

  • Install search-mat-select in your project.

    npm install search-mat-select

  • Then, import the SearchMatSelectModule to your app.module.ts.

    …
    import { SearchMatSelectModule } from 'search-mat-select';
    @NgModule({
    imports: [
        …
        SearchMatSelectModule,
        …
    ],
    …

  • Finally, use the component lib-search-mat-select wherever you want

    <lib-search-mat-select
      [data]="states"
      inputLabel="Brazilian States"
      [selectMultiple]="true"
      [showSelectAll]="true"
      selectAllLabel="Mark all"
      filterLabel="Search for a Brazilian state">
    </lib-search-mat-select>

• set the select options

  Use the attribute data.

  Note: the data passed to the search-select-mat-input MUST extend from the GenericData interface avaliable in the SearchSelectMatInputComponent class.

• set the input label

  Use the attribute inputLabel to set the label/placeholder of the closed select input.

• add the Select All/Mark All checkbox

  Use the data binding attribute [showSelectAll] to enable showing the option.

  • [showSelectAll]="true"
  • [showSelectAll]="false"
  • Use the atribute filterLabel to set Select All checkbox label

• choose between a one option or multiple selector

  Use the data binding attribute [selectMultiple] to switch between one option only or multiple selector.

  • [selectMultiple]="true"
  • [selectMultiple]="false"

• change mat input appearance

  Use the appearance attribute as done in a mat input.

  • appearance="legacy"
  • appearance="standard"
  • appearance="outline"
  • appearance="fill"

  Note: Default appearance is outline

• change mat input float label behavior

  Use the floatLabel attribute as done in a mat input

  • floatLabel="auto"
  • floatLabel="always"

• handle events

  For now, there is only one event emitted from the SearchSelectMatInput.

  • (selectionChange)
    • This event emits GenericData[] every time an option is selected or deselected.

2. Accessibility

Navigation through keyboard is avaliable on this component, see bellow the avaliable navigation keys and shortcuts:

• enter
  • Opens the select options.
  • Selects the hovered option.
• up/down/left/right
  • Navigates through the options.

  Note: When clicked, the filter input will blur.

• ctrl + s
  • Focuses the filter input.

  Note: shift + tab won't focus the filter input, instead use ctrl + s.

• escape
  • Unfocuses the filter input.
  • Closes the select options.

  Note: tab will NOT navigate properly inside selects overall, this neither.