fix FilterKeyType.tsx dropdown display

Author: pd-redis

redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.tsx

@@ -23,18 +23,27 @@ import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import { AdditionalRedisModule } from 'uiSrc/slices/interfaces'
 import { OutsideClickDetector } from 'uiSrc/components/base/utils'
 import { HealthText } from 'uiSrc/components/base/text/HealthText'
-import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
+import {
+  defaultValueRender,
+  RiSelect,
+} from 'uiSrc/components/base/forms/select/RiSelect'
 import { Modal } from 'uiSrc/components/base/display'
 import { FILTER_KEY_TYPE_OPTIONS } from './constants'
 
 import styles from './styles.module.scss'
+import styled from 'styled-components'
 
 const ALL_KEY_TYPES_VALUE = 'all'
 
 export interface Props {
   modules?: AdditionalRedisModule[]
 }
 
+const FilterKeyTypeSelect = styled(RiSelect)`
+  height: 100%;
+  border-radius: 0;
+`
+
 const FilterKeyType = ({ modules }: Props) => {
   const [isSelectOpen, setIsSelectOpen] = useState<boolean>(false)
   const [typeSelected, setTypeSelected] = useState<string>('all')
@@ -157,7 +166,9 @@ const FilterKeyType = ({ modules }: Props) => {
           onCancel={() => setIsInfoPopoverOpen(false)}
           className={styles.unsupportedInfoModal}
           data-testid="filter-not-available-modal"
-          content={<FilterNotAvailable onClose={() => setIsInfoPopoverOpen(false)} />}
+          content={
+            <FilterNotAvailable onClose={() => setIsInfoPopoverOpen(false)} />
+          }
           title={null}
         />
         {!isVersionSupported && (
@@ -168,15 +179,10 @@ const FilterKeyType = ({ modules }: Props) => {
             data-testid="unsupported-btn-anchor"
           />
         )}
-        <RiSelect
+        <FilterKeyTypeSelect
           disabled={!isVersionSupported}
           options={options}
-          valueRender={({ option, isOptionValue }) => {
-            if (isOptionValue) {
-              return option.inputDisplay
-            }
-            return option.dropdownDisplay
-          }}
+          valueRender={defaultValueRender}
           defaultOpen={isSelectOpen}
           value={typeSelected}
           onChange={(value: string) => onChangeType(value)}