diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx index 522fadefc8..743aa7c00b 100644 --- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx @@ -41,14 +41,17 @@ const styles = composes( font-weight: 500; } input { - padding-right: 12px !important; + padding-right: 24px !important; } MenuButton { position: absolute; right: 0; background: transparent; outline: none; - padding: 4px; + display: flex; + align-items: center; + height: 100%; + padding: 0 8px 0 0; cursor: pointer; &:hover, &:focus { opacity: 0.7; @@ -108,17 +111,22 @@ const styles = composes( display: flex; align-items: center; - /* & input-icon { - width: 32px; - height: 32px; - overflow: hidden; - flex-shrink: 0; - - & IconOrImage { - width: 100%; - height: 100%; - } - }*/ + & input-icon { + position: absolute; + left: 0; + width: 16px; + height: 16px; + margin-left: 12px; + + & IconOrImage { + width: 100%; + height: 100%; + } + + &:not(:empty) + input { + padding-left: 34px !important; + } + } } ` ); @@ -173,7 +181,7 @@ export const Combobox: ComboboxType = observer(function Combobox({ valueSelector = v => v, iconSelector, titleSelector, - onChange = () => {}, + onChange = () => { }, onSelect, onSwitch, ...rest @@ -312,19 +320,17 @@ export const Combobox: ComboboxType = observer(function Combobox({ }; }, [inputRef]); - // const icon = selectedItem && iconSelector?.(selectedItem); + const icon = selectedItem && iconSelector?.(selectedItem); return styled(useStyles(baseFormControlStyles, styles))( {children && {children}{rest.required && ' *'}} - {/* {icon && ( + {icon && ( - {typeof icon === 'string' - ? - : icon} + {typeof icon === 'string' ? : icon} - )} */} + )} handleSelect(event.currentTarget.id)} > - {icon && ( + {iconSelector && ( - {typeof icon === 'string' - ? - : icon} + {icon && typeof icon === 'string' ? : icon} )} {valueSelector(item)}