diff --git a/components/molecule/autosuggest/README.md b/components/molecule/autosuggest/README.md index 1b2d7b1c88..5f64485a0d 100644 --- a/components/molecule/autosuggest/README.md +++ b/components/molecule/autosuggest/README.md @@ -81,6 +81,47 @@ const suggestions = ['John','Johnny'] ``` +#### With Right Icon +You can add a right icon to the multiselection input: +```js +} + iconClear={} + rightIcon={} + multiselection +> + {suggestions.map((suggestion, i) => ( + + {option} + + ))} + +``` + +#### With Right Icon and Click Handler +The right icon can be interactive with an `onClickRightIcon` callback: +```js +} + iconClear={} + rightIcon={} + onClickRightIcon={(ev, {value}) => { + console.log('Right icon clicked with value:', value) + }} + multiselection +> + {suggestions.map((suggestion, i) => ( + + {option} + + ))} + +``` + ### Managing State #### Custom component from `MoleculeAutosuggest` that handle State @@ -208,4 +249,4 @@ so then, the `MoleculeAutosuggestWithState` can used in this way... -> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/autosuggest/demo).** \ No newline at end of file +> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/autosuggest/demo).** diff --git a/components/molecule/autosuggest/demo/ArticleMultipleSelection/index.js b/components/molecule/autosuggest/demo/ArticleMultipleSelection/index.js index 7365587fdb..c3d66c54d3 100644 --- a/components/molecule/autosuggest/demo/ArticleMultipleSelection/index.js +++ b/components/molecule/autosuggest/demo/ArticleMultipleSelection/index.js @@ -2,7 +2,7 @@ import {Article, Code, H2, H3, Paragraph} from '@s-ui/documentation-library' import {MoleculeAutosuggestWithStateTags} from '../config.js' -import {iconClose} from '../Icons/index.js' +import {iconClose, iconSearch} from '../Icons/index.js' const ArticleMultipleSelection = () => { return ( @@ -40,6 +40,17 @@ const ArticleMultipleSelection = () => { multiselection disabled /> +

With Right Icon and onClick handler

+ console.log('onChangeTags', {tags, ...args})} + iconCloseTag={iconClose} + rightIcon={iconSearch} + onClickRightIcon={(ev, args) => { + console.log('Right icon clicked!', args) + }} + multiselection + /> ) } diff --git a/components/molecule/autosuggest/src/components/MultipleSelection/index.js b/components/molecule/autosuggest/src/components/MultipleSelection/index.js index bd2e78df3c..2fc82dd495 100644 --- a/components/molecule/autosuggest/src/components/MultipleSelection/index.js +++ b/components/molecule/autosuggest/src/components/MultipleSelection/index.js @@ -27,12 +27,14 @@ const MoleculeAutosuggestFieldMultiSelection = ({ onChange, onChangeTags, onClear, + onClickRightIcon, onInputKeyDown, onSelect, onKeyDown, onToggle, placeholder, required, + rightIcon, shape, size, tabIndex, @@ -94,6 +96,10 @@ const MoleculeAutosuggestFieldMultiSelection = ({ } } + const handleRightClick = (ev, args = {}) => { + typeof onClickRightIcon === 'function' && onClickRightIcon(ev, {...args, value}) + } + return ( <> { await waitFor(() => expect(sinon.assert.called(onBlurSpy))) }) }) + + describe('rightIcon', () => { + it('should render rightIcon when provided in multiselection mode', () => { + // Given + const testID = 'right-icon-test' + const props = { + multiselection: true, + rightIcon: + } + + // When + const {getByTestId} = setup(props) + + // Then + expect(() => getByTestId(testID)).to.not.throw() + }) + + it('should call onClickRightIcon handler when rightIcon is clicked in multiselection mode', () => { + // Given + const onClickRightIconSpy = sinon.spy() + const testID = 'right-icon-test' + const props = { + multiselection: true, + rightIcon: , + onClickRightIcon: onClickRightIconSpy + } + + // When + const {getByTestId} = setup(props) + const rightIconElement = getByTestId(testID) + fireEvent.click(rightIconElement) + + // Then + sinon.assert.calledOnce(onClickRightIconSpy) + }) + }) }) })