fix(plugin-filtering): update selected item rendering logic and toggle button placement

Author: samuelreichert

packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/TagPickerControllerMixin.ts

@@ -130,6 +130,7 @@ export function TagPickerControllerMixin<TBase extends BaseController>(Base: TBa
                         return;
                     }
                     this.filterStore.toggle(selectedItem.value);
+                    this.setInputValue("");
                 },
                 stateReducer(state, { changes, type }) {
                     switch (type) {

packages/shared/widget-plugin-filtering/src/controls/combobox/Combobox.tsx

@@ -50,9 +50,6 @@ export const Combobox = observer(function Combobox(props: ComboboxProps) {
                     placeholder: props.inputPlaceholder
                 })}
             />
-            <button className={cls.toggle} {...getToggleButtonProps({ "aria-label": "Show options" })}>
-                <Arrow className={cls.stateIcon} />
-            </button>
             <ClearButton
                 cls={cls}
                 onClick={() => {
@@ -62,6 +59,9 @@ export const Combobox = observer(function Combobox(props: ComboboxProps) {
                 showSeparator={false}
                 visible={!props.empty}
             />
+            <button className={cls.toggle} {...getToggleButtonProps({ "aria-label": "Show options" })}>
+                <Arrow className={cls.stateIcon} />
+            </button>
             <OptionsWrapper
                 cls={cls}
                 ref={refs.setFloating}

packages/shared/widget-plugin-filtering/src/controls/select/Select.tsx

@@ -43,25 +43,25 @@ export const Select = observer(function Select(props: SelectProps): React.ReactE
             style={props.style}
         >
             <button
-                className={cls.toggle}
+                className={cls.inputContainer}
                 {...getToggleButtonProps({
                     "aria-label": props.value,
                     ref: toggleRef,
                     onFocus: props.onFocus
                 })}
             >
-                {props.value}
+                <span className={cls.toggle}>{props.value}</span>
+                <ClearButton
+                    cls={cls}
+                    onClick={() => {
+                        props.onClear();
+                        toggleRef.current?.focus();
+                    }}
+                    showSeparator={false}
+                    visible={showClear}
+                />
+                <Arrow className={cls.stateIcon} />
             </button>
-            <ClearButton
-                cls={cls}
-                onClick={() => {
-                    props.onClear();
-                    toggleRef.current?.focus();
-                }}
-                showSeparator={false}
-                visible={showClear}
-            />
-            <Arrow className={cls.stateIcon} />
             <OptionsWrapper
                 cls={cls}
                 ref={refs.setFloating}

packages/shared/widget-plugin-filtering/src/controls/tag-picker/TagPicker.tsx

@@ -40,7 +40,6 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
         props.useComboboxProps()
     );
     const { refs, floatingStyles } = useFloatingMenu(isOpen);
-    const showRemoveItem = selectedStyle === "boxes";
 
     return (
         <div
@@ -70,14 +69,14 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
                     }
                 }}
             >
-                {props.selected.map((item, index) => (
-                    <div
-                        className={cls.selectedItem}
-                        key={index}
-                        {...getSelectedItemProps({ selectedItem: item, index })}
-                    >
-                        {item.caption}
-                        {showRemoveItem && (
+                {selectedStyle === "boxes" &&
+                    props.selected.map((item, index) => (
+                        <div
+                            className={cls.selectedItem}
+                            key={index}
+                            {...getSelectedItemProps({ selectedItem: item, index })}
+                        >
+                            {item.caption}
                             <span
                                 className={cls.removeIcon}
                                 onClick={e => {
@@ -87,9 +86,8 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
                             >
                                 <Cross width="10" height="10" />
                             </span>
-                        )}
-                    </div>
-                ))}
+                        </div>
+                    ))}
                 <input
                     className={cls.input}
                     {...getInputProps({
@@ -101,19 +99,21 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
                         "aria-describedby": props.empty ? undefined : `${helperText1} ${inputContainerId}`
                     })}
                 />
+                {selectedStyle === "text" && props.selected.length > 0 && (
+                    <div className={cls.selectedItem}>{props.selected.map(item => item.caption).join(", ")}</div>
+                )}
             </div>
-            <button className={cls.toggle} {...getToggleButtonProps({ "aria-label": "Show options" })}>
-                <Arrow className={cls.stateIcon} />
-            </button>
             <ClearButton
                 cls={cls}
                 onClick={() => {
                     props.onClear();
                     inputRef.current?.focus();
                 }}
-                showSeparator
                 visible={!props.empty}
             />
+            <button className={cls.toggle} {...getToggleButtonProps({ "aria-label": "Show options" })}>
+                <Arrow className={cls.stateIcon} />
+            </button>
             <OptionsWrapper
                 cls={cls}
                 ref={refs.setFloating}