@dhis2-ui/select 10.16.1 → 10.16.3-alpha.1

package/src/multi-select/multi-select.prod.stories.js

@@ -0,0 +1,408 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+import { MultiSelectOption } from '../index.js'
+import { MultiSelect } from './index.js'
+
+const description = `
+Multiple selection allows the user to select more than one option from the list. Checkboxes are used to highlight the possibility of making more than one selection. Selected options are displayed as chips inside the input. Make sure to communicate clearly to the user if there is a limit to the number of selectable elements.
+
+Use multiple selection wherever the user needs to make more than one selection. If the multiple selection is complex, requires a defined order or needs to made from different groups, consider using a transfer component instead.
+
+Read more about using \`Select\` components at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).
+
+\`\`\`js
+import { MultiSelect, MultiSelectOption } from '@dhis2/ui'
+\`\`\`
+
+_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (props-interactive) examples, see individual stories in the 'Canvas' tab._
+`
+
+const eventHandler = (handlerName) => (payload, event) => {
+    console.log(`${handlerName} payload`, payload)
+    console.log(`${handlerName} event`, event)
+}
+
+const onChange = eventHandler('onChange')
+const onFocus = eventHandler('onFocus')
+const onBlur = eventHandler('onBlur')
+
+const CustomMultiSelectOption = ({ label, onClick }) => (
+    <div onClick={(e) => onClick({}, e)}>{label}</div>
+)
+
+CustomMultiSelectOption.propTypes = {
+    label: PropTypes.string,
+    onClick: PropTypes.func,
+}
+
+const requiredIfArgType = {
+    table: { type: { summary: 'string' }, control: { type: 'string' } },
+}
+
+export default {
+    title: 'Multi Select',
+    component: MultiSelect,
+    parameters: {
+        docs: {
+            description: { component: description },
+            // Disable stories in docs page by default, then use one representative example
+            disable: true,
+            // Use iframe to keep dropdown menu inside story for docs page
+            inlineStories: false,
+            iframeHeight: '300px',
+        },
+    },
+    // Use 'onChange' as a default arg, otherwise components throw an error when interacted with
+    // (Maybe this could be handled in the component - as a required prop)
+    args: { className: 'select', onChange },
+    argTypes: {
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+        clearText: { ...requiredIfArgType },
+        noMatchText: { ...requiredIfArgType },
+    },
+}
+
+const WithOptionsTemplate = (args) => (
+    <MultiSelect {...args}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+
+const EmptyTemplate = (args) => <MultiSelect {...args} />
+
+export const WithOptionsAndOnChange = WithOptionsTemplate.bind({})
+WithOptionsAndOnChange.storyName = 'With options and onChange'
+
+export const WithOptionsAndASelection = WithOptionsTemplate.bind({})
+WithOptionsAndASelection.args = { selected: ['1'] }
+// Enable this story as the primary for the docs page
+WithOptionsAndASelection.parameters = { docs: { disable: false } }
+WithOptionsAndASelection.storyName = 'With options and a selection'
+
+export const WithOnFocus = WithOptionsTemplate.bind({})
+WithOnFocus.args = { onFocus }
+WithOnFocus.storyName = 'With on focus'
+
+export const WithOnBlur = WithOptionsTemplate.bind({})
+WithOnBlur.args = { onBlur }
+WithOnBlur.storyName = 'With onBlur'
+
+export const WithCustomOptionsAndOnChange = (args) => (
+    <MultiSelect {...args}>
+        <CustomMultiSelectOption value="1" label="option one" />
+        <CustomMultiSelectOption value="2" label="option two" />
+        <CustomMultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+WithCustomOptionsAndOnChange.storyName = 'With custom options and onChange'
+
+export const WithInvalidOptions = (args) => (
+    <MultiSelect {...args}>
+        <div>invalid one</div>
+        <MultiSelectOption value="1" label="option one" />
+        <div>invalid two</div>
+        <MultiSelectOption value="2" label="option two" />
+        <div>invalid three</div>
+        <MultiSelectOption value="3" label="option three" />
+        {null}
+        {undefined}
+        {false}
+    </MultiSelect>
+)
+
+export const WithInvalidFilterableOptions = (args) => (
+    <MultiSelect {...args}>
+        <div>invalid one</div>
+        <MultiSelectOption value="1" label="option one" />
+        <div>invalid two</div>
+        <MultiSelectOption value="2" label="option two" />
+        <div>invalid three</div>
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+WithInvalidFilterableOptions.args = {
+    filterable: true,
+    noMatchText: 'No match found',
+}
+
+export const WithInitialFocus = EmptyTemplate.bind({})
+WithInitialFocus.args = { initialFocus: true }
+WithInitialFocus.parameters = { docs: { disable: true } }
+WithInitialFocus.storyName = 'With initial focus'
+
+export const Dense = WithOptionsTemplate.bind({})
+Dense.args = { dense: true, placeholder: 'Dense sized multi select' }
+Dense.storyName = 'Dense'
+
+export const DenseWithSelections = WithOptionsTemplate.bind({})
+DenseWithSelections.args = { dense: true, selected: ['1', '2'] }
+DenseWithSelections.storyName = 'Dense with selections'
+
+export const Empty = EmptyTemplate.bind({})
+
+export const EmptyWithEmptyText = EmptyTemplate.bind({})
+EmptyWithEmptyText.args = { empty: 'Custom empty text' }
+
+export const EmptyWithEmptyComponent = EmptyTemplate.bind({})
+EmptyWithEmptyComponent.args = {
+    empty: <div className="custom-empty">Custom empty component</div>,
+}
+
+export const WithOptionsAndLoading = WithOptionsTemplate.bind({})
+WithOptionsAndLoading.args = { loading: true }
+
+export const WithOptionsLoadingAndLoadingText = WithOptionsTemplate.bind({})
+WithOptionsLoadingAndLoadingText.args = {
+    ...WithOptionsAndLoading.args,
+    loadingText: 'Loading options',
+}
+WithOptionsLoadingAndLoadingText.storyName =
+    'With options, loading and loading text'
+
+export const WithMoreThanTenOptions = (args) => (
+    <MultiSelect {...args}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+        <MultiSelectOption value="4" label="option four" />
+        <MultiSelectOption value="5" label="option five" />
+        <MultiSelectOption value="6" label="option six" />
+        <MultiSelectOption value="7" label="option seven" />
+        <MultiSelectOption value="8" label="option eight" />
+        <MultiSelectOption value="9" label="option nine" />
+        <MultiSelectOption value="10" label="option ten" />
+        <MultiSelectOption value="11" label="option eleven" />
+        <MultiSelectOption value="12" label="option twelve" />
+    </MultiSelect>
+)
+
+export const WithMoreThanThreeOptionsAndA100PxMaxHeight = (args) => (
+    <MultiSelect {...args}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+        <MultiSelectOption value="4" label="option four" />
+        <MultiSelectOption value="5" label="option five" />
+        <MultiSelectOption value="6" label="option six" />
+        <MultiSelectOption value="7" label="option seven" />
+        <MultiSelectOption value="8" label="option eight" />
+        <MultiSelectOption value="9" label="option nine" />
+        <MultiSelectOption value="10" label="option ten" />
+        <MultiSelectOption value="11" label="option eleven" />
+        <MultiSelectOption value="12" label="option twelve" />
+    </MultiSelect>
+)
+WithMoreThanThreeOptionsAndA100PxMaxHeight.args = { maxHeight: '100px' }
+WithMoreThanThreeOptionsAndA100PxMaxHeight.storyName =
+    'With more than three options and a 100px max-height'
+
+export const WithOptionsAndDisabled = WithOptionsTemplate.bind({})
+WithOptionsAndDisabled.args = { disabled: true }
+WithOptionsAndDisabled.storyName = 'With options and disabled'
+
+export const WithOptionsASelectionAndDisabled = WithOptionsTemplate.bind({})
+WithOptionsASelectionAndDisabled.args = {
+    ...WithOptionsAndDisabled.args,
+    ...WithOptionsAndASelection.args,
+}
+WithOptionsASelectionAndDisabled.storyName =
+    'With options, a selection and disabled'
+
+export const WithPrefix = WithOptionsTemplate.bind({})
+WithPrefix.args = { prefix: 'Prefix text' }
+
+export const WithPrefixAndSelection = WithOptionsTemplate.bind({})
+WithPrefixAndSelection.args = {
+    ...WithPrefix.args,
+    ...WithOptionsAndASelection.args,
+}
+
+export const WithPlaceholder = WithOptionsTemplate.bind({})
+WithPlaceholder.args = { placeholder: 'Placeholder text' }
+
+export const WithPlaceholderAndSelection = WithOptionsTemplate.bind({})
+WithPlaceholderAndSelection.args = {
+    ...WithPlaceholder.args,
+    ...WithOptionsAndASelection.args,
+}
+
+export const WithDisabledOptionAndOnChange = (args) => (
+    <MultiSelect {...args}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+        <MultiSelectOption value="4" label="disabled option" disabled />
+    </MultiSelect>
+)
+WithDisabledOptionAndOnChange.storyName = 'With disabled option and onChange'
+
+export const WithOptionsAndMultipleSelections = WithOptionsTemplate.bind({})
+WithOptionsAndMultipleSelections.args = { selected: ['1', '2'] }
+
+export const WithMultipleSelectionsWrapped = () => {
+    const [selected, setSelected] = React.useState(['1', '2', '4', '6'])
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <MultiSelect
+                className="select"
+                selected={selected}
+                onChange={({ selected }) => {
+                    console.log({ selected })
+                    setSelected(selected)
+                }}
+                inputMaxHeight={'auto'}
+            >
+                <MultiSelectOption value="1" label="option one" />
+                <MultiSelectOption value="2" label="option two" />
+                <MultiSelectOption value="3" label="option three" />
+                <MultiSelectOption value="4" label="option four" />
+                <MultiSelectOption value="5" label="option five" />
+                <MultiSelectOption value="6" label="option six" />
+                <MultiSelectOption value="7" label="option seven" />
+            </MultiSelect>
+        </div>
+    )
+}
+
+export const WithClearButtonSelectionAndOnChange = WithOptionsTemplate.bind({})
+WithClearButtonSelectionAndOnChange.args = {
+    ...WithOptionsAndASelection.args,
+    clearable: true,
+    clearText: 'Clear',
+}
+WithClearButtonSelectionAndOnChange.storyName =
+    'With clear button, selection and onChange'
+
+export const WithFilterField = WithOptionsTemplate.bind({})
+WithFilterField.args = { ...WithInvalidFilterableOptions.args }
+
+export const DefaultPosition = (args) => (
+    <>
+        <MultiSelect {...args}>
+            <MultiSelectOption value="1" label="option one" />
+            <MultiSelectOption value="2" label="option two" />
+            <MultiSelectOption value="3" label="option three" />
+            <MultiSelectOption value="4" label="option four" />
+            <MultiSelectOption value="5" label="option five" />
+            <MultiSelectOption value="6" label="option six" />
+            <MultiSelectOption value="7" label="option seven" />
+            <MultiSelectOption value="8" label="option eight" />
+            <MultiSelectOption value="9" label="option nine" />
+            <MultiSelectOption value="10" label="option ten" />
+            <MultiSelectOption value="11" label="option eleven" />
+            <MultiSelectOption value="12" label="option twelve" />
+        </MultiSelect>
+        <style jsx>{`
+            :global(#root) {
+                margin-bottom: 2000px;
+            }
+        `}</style>
+    </>
+)
+
+export const FlippedPosition = (args) => (
+    <>
+        <MultiSelect {...args}>
+            <MultiSelectOption value="1" label="option one" />
+            <MultiSelectOption value="2" label="option two" />
+            <MultiSelectOption value="3" label="option three" />
+            <MultiSelectOption value="4" label="option four" />
+            <MultiSelectOption value="5" label="option five" />
+            <MultiSelectOption value="6" label="option six" />
+            <MultiSelectOption value="7" label="option seven" />
+            <MultiSelectOption value="8" label="option eight" />
+            <MultiSelectOption value="9" label="option nine" />
+            <MultiSelectOption value="10" label="option ten" />
+            <MultiSelectOption value="11" label="option eleven" />
+            <MultiSelectOption value="12" label="option twelve" />
+        </MultiSelect>
+        <style jsx>{`
+            :global(html),
+            :global(body),
+            :global(#root) {
+                position: relative;
+                height: 500px;
+                max-height: 500px;
+            }
+            :global(#root) {
+                padding-top: 400px !important;
+            }
+        `}</style>
+    </>
+)
+
+export const ShiftedIntoView = (args) => (
+    <>
+        <MultiSelect {...args}>
+            <MultiSelectOption value="1" label="option one" />
+            <MultiSelectOption value="2" label="option two" />
+            <MultiSelectOption value="3" label="option three" />
+            <MultiSelectOption value="4" label="option four" />
+            <MultiSelectOption value="5" label="option five" />
+            <MultiSelectOption value="6" label="option six" />
+            <MultiSelectOption value="7" label="option seven" />
+            <MultiSelectOption value="8" label="option eight" />
+            <MultiSelectOption value="9" label="option nine" />
+            <MultiSelectOption value="10" label="option ten" />
+            <MultiSelectOption value="11" label="option eleven" />
+            <MultiSelectOption value="12" label="option twelve" />
+        </MultiSelect>
+        <style jsx>{`
+            :global(html),
+            :global(body),
+            :global(#root) {
+                position: relative;
+                height: 300px !important;
+                max-height: 300px;
+            }
+            :global(#root) {
+                padding-top: 130px !important;
+            }
+        `}</style>
+    </>
+)
+
+export const CollapseSelectionAfterThreshold = () => {
+    const [selected, setSelected] = React.useState(['1', '3', '5'])
+    return (
+        <div style={{ maxWidth: 400 }}>
+            <MultiSelect
+                className="select"
+                selected={selected}
+                onChange={({ selected }) => setSelected(selected)}
+                collapseSelectionAfter={2}
+                prefix="Prefix text"
+                clearable
+                clearText="Clear all"
+            >
+                <MultiSelectOption value="1" label="option one" />
+                <MultiSelectOption value="2" label="option two" />
+                <MultiSelectOption value="3" label="option three" />
+                <MultiSelectOption value="4" label="option four" />
+                <MultiSelectOption value="5" label="option five" />
+                <MultiSelectOption value="6" label="option six" />
+            </MultiSelect>
+        </div>
+    )
+}
+CollapseSelectionAfterThreshold.storyName = 'Collapse selection after threshold'
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.body.dir = 'rtl'
+        return () => {
+            document.body.dir = 'ltr'
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <WithOptionsTemplate {...args} />
+        </div>
+    )
+}
+RTL.args = { selected: ['1', '2'], prefix: 'RTL text' }

package/src/multi-select/selection-list.js

@@ -0,0 +1,79 @@
+import { Chip } from '@dhis2-ui/chip'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { removeOption, findOptionChild } from '../select/index.js'
+
+const createRemoveHandler =
+    ({ selected, onChange, value }) =>
+    (_, e) => {
+        const filtered = removeOption(value, selected)
+        const data = { selected: filtered }
+
+        onChange(data, e)
+    }
+
+const SelectionList = ({ selected, onChange, disabled, options }) => (
+    <React.Fragment>
+        {selected.map((value) => {
+            const isProduction = process.env.NODE_ENV === 'production'
+            const selectedOption = findOptionChild(value, options)
+
+            if (!selectedOption) {
+                const message =
+                    `There is no option with the value: "${value}". ` +
+                    'Make sure that all the values passed to the selected ' +
+                    'prop match the value of an existing option.'
+
+                if (isProduction) {
+                    // Don't crash the app if in production
+                    console.error(message)
+                } else {
+                    // Throw error if not in production for maximum visibility
+                    throw new Error(message)
+                }
+            }
+
+            const isDisabled = selectedOption
+                ? // The chip should be disabled if the option or the select are disabled
+                  selectedOption.props.disabled || disabled
+                : // If there is no selected option, just look at the select
+                  disabled
+            // Use the selected value if we do not have a label
+            const label = selectedOption ? selectedOption.props.label : value
+
+            // Create an onRemove handler, but only if it's not disabled
+            const onRemove = isDisabled
+                ? undefined
+                : createRemoveHandler({
+                      selected,
+                      onChange,
+                      value,
+                  })
+
+            return (
+                <Chip
+                    key={value}
+                    onRemove={onRemove}
+                    disabled={isDisabled}
+                    marginBottom={0}
+                    marginLeft={0}
+                    marginTop={0}
+                    marginRight={0}
+                    overflow
+                    dense
+                >
+                    {label}
+                </Chip>
+            )
+        })}
+    </React.Fragment>
+)
+
+SelectionList.propTypes = {
+    disabled: PropTypes.bool,
+    options: PropTypes.node,
+    selected: PropTypes.arrayOf(PropTypes.string),
+    onChange: PropTypes.func,
+}
+
+export { SelectionList }

package/src/multi-select-field/__tests__/multi-select-field.test.js

@@ -0,0 +1,29 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import React from 'react'
+import { MultiSelectField } from '../multi-select-field.js'
+
+describe('<MultiSelect />', () => {
+    it('should call the onKeyDown callback when provided', () => {
+        const onKeyDown = jest.fn()
+
+        render(
+            <MultiSelectField
+                label="label"
+                placeholder="placeholder"
+                onKeyDown={onKeyDown}
+            />
+        )
+
+        fireEvent.keyDown(
+            screen.getByTestId('dhis2-uicore-multiselect-placeholder'),
+            { key: 'Enter', code: 'Enter', charCode: 13 }
+        )
+
+        expect(onKeyDown).toHaveBeenCalledWith(
+            { selected: [] },
+            expect.objectContaining({})
+        )
+
+        expect(onKeyDown).toHaveBeenCalledTimes(1)
+    })
+})

package/src/multi-select-field/features/accepts_help_text/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelectField with help text is rendered', () => {
+    cy.visitStory('MultiSelectField', 'With help text')
+})
+
+Then('the help text is visible', () => {
+    cy.contains('The help text').should('be.visible')
+})

package/src/multi-select-field/features/accepts_help_text.feature

@@ -0,0 +1,5 @@
+Feature: Help text for the MultiSelectField
+
+    Scenario: Rendering a MultiSelectField with help text
+        Given a MultiSelectField with help text is rendered
+        Then the help text is visible

package/src/multi-select-field/features/accepts_label/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelectField with a label is rendered', () => {
+    cy.visitStory('MultiSelectField', 'With label')
+})
+
+Then('the label is visible', () => {
+    cy.contains('The label').should('be.visible')
+})

package/src/multi-select-field/features/accepts_label.feature

@@ -0,0 +1,5 @@
+Feature: Label for the MultiSelectField
+
+    Scenario: Rendering a MultiSelectField with a label
+        Given a MultiSelectField with a label is rendered
+        Then the label is visible

package/src/multi-select-field/features/accepts_validation_text/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelectField with validation text is rendered', () => {
+    cy.visitStory('MultiSelectField', 'With validation text')
+})
+
+Then('the validation text is visible', () => {
+    cy.contains('The validation text').should('be.visible')
+})

package/src/multi-select-field/features/accepts_validation_text.feature

@@ -0,0 +1,5 @@
+Feature: Validation text for the MultiSelectField
+
+    Scenario: Rendering a MultiSelectField with validation text
+        Given a MultiSelectField with validation text is rendered
+        Then the validation text is visible

package/src/multi-select-field/features/can_be_required/index.js

@@ -0,0 +1,11 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelectField with label and a required flag is rendered', () => {
+    cy.visitStory('MultiSelectField', 'With label and required status')
+})
+
+Then('the required indicator is visible', () => {
+    cy.get(
+        '[data-test="dhis2-uiwidgets-multiselectfield-label-required"]'
+    ).should('be.visible')
+})

package/src/multi-select-field/features/can_be_required.feature

@@ -0,0 +1,5 @@
+Feature: Required status for the MultiSelectField
+
+    Scenario: Rendering a MultiSelectField that is required
+        Given a MultiSelectField with label and a required flag is rendered
+        Then the required indicator is visible

package/src/multi-select-field/features/has_default_clear_text/index.js

@@ -0,0 +1,16 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a clearable MultiSelectField with selected option is rendered', () => {
+    cy.visitStory('MultiSelectField', 'With clearable and selected option')
+})
+
+When('the clear button is hovered', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect-clear"]').trigger(
+        'mouseover',
+        'top'
+    )
+})
+
+Then('the clear text is visible', () => {
+    cy.contains('Clear').should('be.visible')
+})

package/src/multi-select-field/features/has_default_clear_text.feature

@@ -0,0 +1,6 @@
+Feature: Clear text for the MultiSelectField
+
+    Scenario: Rendering a clearable MultiSelectField
+        Given a clearable MultiSelectField with selected option is rendered
+        When the clear button is hovered
+        Then the clear text is visible

package/src/multi-select-field/features/has_default_empty_text/index.js

@@ -0,0 +1,13 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an empty MultiSelectField is rendered', () => {
+    cy.visitStory('MultiSelectField', 'Without options')
+})
+
+When('the Select is opened', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+})
+
+Then('the empty text is visible', () => {
+    cy.contains('No data found').should('be.visible')
+})

package/src/multi-select-field/features/has_default_empty_text.feature

@@ -0,0 +1,6 @@
+Feature: Empty text for the MultiSelectField
+
+    Scenario: Rendering an empty MultiSelectField
+        Given an empty MultiSelectField is rendered
+        When the Select is opened
+        Then the empty text is visible

package/src/multi-select-field/features/has_default_filter_nomatch_text/index.js

@@ -0,0 +1,17 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a filterable MultiSelectField is rendered', () => {
+    cy.visitStory('MultiSelectField', 'With filterable')
+})
+
+When('the Select is opened', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+})
+
+When('a filter that does not match any options is entered', () => {
+    cy.focused().type('Two')
+})
+
+Then('the no match text is visible', () => {
+    cy.contains('No options found').should('be.visible')
+})

package/src/multi-select-field/features/has_default_filter_nomatch_text.feature

@@ -0,0 +1,7 @@
+Feature: Nomatchtext for the MultiSelectField
+
+    Scenario: Rendering a filterable MultiSelectField
+        Given a filterable MultiSelectField is rendered
+        When the Select is opened
+        And a filter that does not match any options is entered
+        Then the no match text is visible