[PickerInput]: fix selected value styles in toggler in case of single…

… mode, searchPosition !== input and minCharsToSearch > 0 and for case with readonly=true and searchPosition !== input.

changelog.md

@@ -18,6 +18,7 @@
 * [MainMenuButton]: removed unnecessary `role` and `aria-haspopup` attributes ([#2733](https://github.com/epam/UUI/pull/2733))
 * [MainMenuButton]: Add `aria-current` attribute with value `page` for active links ([#2734](https://github.com/epam/UUI/pull/2734))
 * [DataTableRow]: fixed `ref` prop
+* [PickerInput]: fixed toggler selected value styles in case of single mode, searchPosition !== input and minCharsToSearch > 0 and for case with readonly=true and searchPosition !== input.
 
 
 # 5.12.1 - 17.12.2024

uui-components/src/pickers/PickerToggler.tsx

@@ -74,11 +74,10 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
     }, [inFocus, handleClick]);
 
     const isActivePlaceholder = (): Boolean => {
-        if (props.isReadonly) return false;
-        else if (props.isOpen && props.searchPosition === 'input') return false;
-        else if (props.minCharsToSearch && inFocus) return false;
-        else if (props.pickerMode === 'single' && props.selection && props.selection.length > 0) return true;
-        else return false;
+        if (props.pickerMode === 'single' && props.searchPosition !== 'input') {
+            return true;
+        }
+        return false;
     };
 
     const blur = (e?: React.FocusEvent<HTMLElement>) => {

uui/components/pickers/PickerToggler.module.scss

@@ -207,6 +207,14 @@
     &:global(.uui-readonly) {
         @include readonly-input();
 
+        :global(.uui-placeholder) {
+            &:global(.uui-input) {
+                &::placeholder {
+                    color: var(--uui-picker_toggler-text); // we store selected value in placeholder, so it should have the same style as input value if .uui-placeholder is set
+                }
+            }
+        }
+
         :global(.uui-icon-dropdown), :global(.uui-icon-cancel) {
             visibility: hidden;
         }