222ce06f0f
* add default placeholder, remove focus on first load * fix some bugs re autofocus and mouse click to select * allow custom selected styles to be passed in * operate on objects with name property rather than plain strings * WIP main functionality in place * set default selections, allow a max to be placed on selections * switch help context * bug fixes to edit mode, static suggestions * make sure suggestion resumes when edit begins * cleanup and docs * update existing form test * add component tests * add more component test cases * refactor max selections flow, ensure default tag data only loads once * stop removing combobox properties now the input stays visible * add max selections test * refactor * make sure input refocus happens after blur event * update cypress tests * some small renames and doc changes * only fetch exact matches from added tags * fix test, update dark theme background * set a max height on the popover, and ensure options can be scrolled into view * woops - max height * Update app/javascript/article-form/components/TagsField.jsx Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com> * refactors * stop dropdown from flickering * use ButtonNew * remove redundant variant * nudge PR checks Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>
24 lines
678 B
JavaScript
24 lines
678 B
JavaScript
import { h } from 'preact';
|
|
import { Icon, ButtonNew as Button } from '@crayons';
|
|
import { Close } from '@images/x.svg';
|
|
|
|
export const DefaultSelectionTemplate = ({ name, onEdit, onDeselect }) => (
|
|
<div role="group" aria-label={name} className="flex mr-1 mb-1 w-max">
|
|
<Button
|
|
variant="secondary"
|
|
className="c-autocomplete--multi__selected p-1 cursor-text"
|
|
aria-label={`Edit ${name}`}
|
|
onClick={onEdit}
|
|
>
|
|
{name}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
className="c-autocomplete--multi__selected p-1"
|
|
aria-label={`Remove ${name}`}
|
|
onClick={onDeselect}
|
|
>
|
|
<Icon src={Close} />
|
|
</Button>
|
|
</div>
|
|
);
|