From f1e72c167c72926a038e810206914879ac13e79f Mon Sep 17 00:00:00 2001
From: Paul Mineev <paul@mineev.me>
Date: Mon, 12 Sep 2022 18:15:28 -0700
Subject: [PATCH] fix selected item

---
 .../remark42/app/components/select/select.spec.tsx   | 12 ++++--------
 .../apps/remark42/app/components/select/select.tsx   |  5 +----
 .../remark42/app/components/sort-picker.spec.tsx     |  3 +--
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/frontend/apps/remark42/app/components/select/select.spec.tsx b/frontend/apps/remark42/app/components/select/select.spec.tsx
index 9b5f9f2b01..229c88ae56 100644
--- a/frontend/apps/remark42/app/components/select/select.spec.tsx
+++ b/frontend/apps/remark42/app/components/select/select.spec.tsx
@@ -21,15 +21,11 @@ describe('<Select/>', () => {
   });
 
   it('should render selected item', () => {
-    render(<Select items={items} selected={items[0]} />);
-
-    const selectedItem = items[0];
-    const selectedOption = screen.getAllByRole<HTMLOptionElement>('option')[0];
+    const selectedIndex = 1;
+    const selectedItem = items[selectedIndex];
 
-    expect(screen.getAllByText(selectedItem.label)).toHaveLength(2);
-    expect(selectedOption).toBeInTheDocument();
-    expect(selectedOption.selected).toBeTruthy();
-    expect(selectedOption.textContent).toBe(selectedItem.label);
+    render(<Select items={items} selected={selectedItem} />);
+    expect(screen.getAllByRole<HTMLOptionElement>('option')[selectedIndex].selected).toBeTruthy();
   });
 
   it('should highlight select on focus', async () => {
diff --git a/frontend/apps/remark42/app/components/select/select.tsx b/frontend/apps/remark42/app/components/select/select.tsx
index 56ad588990..26c9b298a4 100644
--- a/frontend/apps/remark42/app/components/select/select.tsx
+++ b/frontend/apps/remark42/app/components/select/select.tsx
@@ -45,12 +45,9 @@ export function Select({ items, selected, size = 'md', ...props }: Props) {
         onFocus={() => setFocus(true)}
         onBlur={() => setFocus(false)}
         className={clsx('select-element', styles.select)}
-        // wrong typings in preact lib
-        // @ts-ignore
-        selected={selectedItem.value}
       >
         {items.map((i) => (
-          <option key={i.value} value={i.value}>
+          <option key={i.value} value={i.value} selected={selectedItem.value === i.value}>
             {i.label}
           </option>
         ))}
diff --git a/frontend/apps/remark42/app/components/sort-picker.spec.tsx b/frontend/apps/remark42/app/components/sort-picker.spec.tsx
index 5fafe728b7..8367a4ed3d 100644
--- a/frontend/apps/remark42/app/components/sort-picker.spec.tsx
+++ b/frontend/apps/remark42/app/components/sort-picker.spec.tsx
@@ -26,8 +26,7 @@ describe('<SortPicker />', () => {
 
   it('should render selected element', () => {
     render(<SortPicker />, { comments: { sort: '-active' } as StoreState['comments'] });
-    expect(screen.getAllByText('Recently updated')).toHaveLength(2);
-    expect(screen.getAllByRole('option')[0].parentElement).toHaveAttribute('selected', '-active');
+    expect(screen.getAllByText<HTMLOptionElement>('Recently updated')[1].selected).toBeTruthy();
   });
 
   it('should change selected store', async () => {