From b0db083305164bb69957866ebde32492367e1dc6 Mon Sep 17 00:00:00 2001
From: Aleksandra Pleshcheva <46083995+aeksandla@users.noreply.github.com>
Date: Fri, 16 Feb 2024 15:49:45 +0300
Subject: [PATCH] fix: feed select (#176)

---
 src/blocks/Feed/__stories__/Feed.stories.tsx     |  9 ++++++++-
 .../components/Controls/customRenders.tsx        |  3 +--
 .../CustomSwitcher/CustomSwitcher.scss           | 12 ++++++++++++
 .../components/CustomSwitcher/CustomSwitcher.tsx | 16 ++++++++--------
 .../BlogPage/__stories__/BlogPage.stories.tsx    | 12 ++----------
 src/demo/mocks.ts                                | 12 ++++++++++++
 6 files changed, 43 insertions(+), 21 deletions(-)
 create mode 100644 src/demo/mocks.ts

diff --git a/src/blocks/Feed/__stories__/Feed.stories.tsx b/src/blocks/Feed/__stories__/Feed.stories.tsx
index 6bd6ed93..fe8a30a9 100644
--- a/src/blocks/Feed/__stories__/Feed.stories.tsx
+++ b/src/blocks/Feed/__stories__/Feed.stories.tsx
@@ -21,6 +21,8 @@ import {Feed} from '../Feed';
 import mockedPosts from '../../../../.mocks/posts.json';
 import mockedServices from '../../../../.mocks/services.json';
 import mockedTags from '../../../../.mocks/tags.json';
+import {RouterContext} from '../../../contexts/RouterContext';
+import {routerData} from '../../../demo/mocks';
 
 export default {
     title: 'Blocks/Feed',
@@ -76,7 +78,12 @@ const contextData = {
 
 const DefaultTemplate: StoryFn<FeedModel> = (args) => (
     <FeedContext.Provider value={contextData as unknown as FeedContextProps}>
-        <PageConstructor content={{blocks: [args] as unknown as Block[]}} custom={customBlocks} />
+        <RouterContext.Provider value={routerData}>
+            <PageConstructor
+                content={{blocks: [args] as unknown as Block[]}}
+                custom={customBlocks}
+            />
+        </RouterContext.Provider>
     </FeedContext.Provider>
 );
 
diff --git a/src/components/FeedHeader/components/Controls/customRenders.tsx b/src/components/FeedHeader/components/Controls/customRenders.tsx
index 75ca5722..47fb8865 100644
--- a/src/components/FeedHeader/components/Controls/customRenders.tsx
+++ b/src/components/FeedHeader/components/Controls/customRenders.tsx
@@ -40,9 +40,8 @@ export const renderSwitcher: RenderSwitcherType =
         />
     );
 
-export const renderFilter: SelectProps['renderFilter'] = ({value, ref, onChange, onKeyDown}) => (
+export const renderFilter: SelectProps['renderFilter'] = ({value, onChange, onKeyDown}) => (
     <TextInput
-        controlRef={ref}
         controlProps={{size: 1}}
         value={value}
         view="clear"
diff --git a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss
index 9dba6004..93f0e767 100644
--- a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss
+++ b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss
@@ -49,6 +49,8 @@ $clearIconSize: 11px;
     }
 
     &__custom-switcher-element {
+        color: var(--g-color-text-primary);
+
         &_content {
             display: inline-block;
             flex-grow: 1;
@@ -77,6 +79,15 @@ $clearIconSize: 11px;
             min-width: 30px;
             height: 100%;
         }
+
+        &_overlay {
+            position: absolute;
+            inset: 0;
+            border-radius: var(--g-border-radius-xl);
+            background: transparent;
+            border: none;
+            cursor: pointer;
+        }
     }
 
     &__switcher-arrow {
@@ -87,5 +98,6 @@ $clearIconSize: 11px;
     &__clear {
         width: $clearIconSize;
         height: $clearIconSize;
+        color: var(--g-color-text-primary);
     }
 }
diff --git a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx
index ab29ba1a..41bc2919 100644
--- a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx
+++ b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx
@@ -43,13 +43,13 @@ export const CustomSwitcher = ({
     const hasCounter = itemsNames.length > 1;
 
     return (
-        <button
-            className={b('custom-switcher')}
-            onClick={onClick}
-            ref={controlRef as LegacyRef<HTMLButtonElement>}
-            onKeyDown={onKeyDown}
-            aria-expanded={open}
-        >
+        <div className={b('custom-switcher')} ref={controlRef as LegacyRef<HTMLDivElement>}>
+            <button
+                onClick={onClick}
+                className={b('custom-switcher-element', {overlay: true})}
+                onKeyDown={onKeyDown}
+                aria-expanded={open}
+            />
             <div className={b('custom-switcher-element', {content: true})}>
                 {itemsNames?.join(', ')}
             </div>
@@ -67,6 +67,6 @@ export const CustomSwitcher = ({
             <div className={b('custom-switcher-element', {arrow: true})}>
                 <Icon data={DropdownArrow} size={ICON_SIZE} className={b('switcher-arrow')} />
             </div>
-        </button>
+        </div>
     );
 };
diff --git a/src/containers/BlogPage/__stories__/BlogPage.stories.tsx b/src/containers/BlogPage/__stories__/BlogPage.stories.tsx
index fd9c5044..cfed4d66 100644
--- a/src/containers/BlogPage/__stories__/BlogPage.stories.tsx
+++ b/src/containers/BlogPage/__stories__/BlogPage.stories.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type {Meta, StoryContext, StoryFn} from '@storybook/react';
 
 import {BlogConstructorProvider} from '../../../constructor/BlogConstructorProvider';
-import {GetPostsRequest, Query} from '../../../models/common';
+import {GetPostsRequest} from '../../../models/common';
 import {BlogPage, BlogPageProps} from '../BlogPage';
 
 import page from '../../../../.mocks/blogPage.json';
@@ -12,17 +12,9 @@ import posts from '../../../../.mocks/posts.json';
 import services from '../../../../.mocks/services.json';
 import tags from '../../../../.mocks/tags.json';
 import {Lang} from '../../../models/locale';
+import {routerData} from '../../../demo/mocks';
 
 const mockMetaComponent = <title>Blog page</title>;
-const routerData = {
-    as: '/',
-    pathname: '/',
-    hostname: 'host',
-    query: {},
-    updateQueryCallback: (params: Query) => {
-        console.log('params', params);
-    },
-};
 
 export default {
     title: 'Containers/BlogPage',
diff --git a/src/demo/mocks.ts b/src/demo/mocks.ts
new file mode 100644
index 00000000..7708305e
--- /dev/null
+++ b/src/demo/mocks.ts
@@ -0,0 +1,12 @@
+import {Query} from '../models/common';
+
+export const routerData = {
+    as: '/',
+    pathname: '/',
+    hostname: 'host',
+    query: {},
+    updateQueryCallback: (params: Query) => {
+        // eslint-disable-next-line no-console
+        console.log('params', params);
+    },
+};