From 9c024b98d3ab42027e01305e6820534f01fb783a Mon Sep 17 00:00:00 2001
From: Iku-turso <mikko.aspiala@gmail.com>
Date: Mon, 21 Mar 2022 16:27:21 +0200
Subject: [PATCH] Require id for <Select /> to prevent non-deterministic
 renders

This was caused by global state in a 3rd party lib: "react-select".

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
---
 .../components/select/select.test.tsx         | 16 ++++++------
 src/renderer/components/select/select.tsx     | 26 ++++++++++++++-----
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/select/select.test.tsx b/src/renderer/components/select/select.test.tsx
index 0df53bd13e..8db25354d3 100644
--- a/src/renderer/components/select/select.test.tsx
+++ b/src/renderer/components/select/select.test.tsx
@@ -63,7 +63,7 @@ describe("<Select />", () => {
 
     const onChange = jest.fn();
 
-    const { container } = render(<Select onChange={onChange} options={options} />);
+    const { container } = render(<Select id="some-test-input" onChange={onChange} options={options} />);
 
     expect(container).toBeInstanceOf(HTMLElement);
   });
@@ -82,7 +82,7 @@ describe("<Select />", () => {
 
     const onChange = jest.fn();
 
-    const { container } = render(<Select value={options[0].value} onChange={onChange} options={options} />);
+    const { container } = render(<Select id="some-test-input" value={options[0].value} onChange={onChange} options={options} />);
     const selectedValueContainer = container.querySelector(".Select__single-value");
 
     expect(selectedValueContainer.textContent).toBe(options[0].label);
@@ -102,12 +102,12 @@ describe("<Select />", () => {
 
     const onChange = jest.fn();
 
-    const { container, rerender } = render(<Select value={options[0].value} onChange={onChange} options={options} />);
+    const { container, rerender } = render(<Select id="some-test-input" value={options[0].value} onChange={onChange} options={options} />);
     const selectedValueContainer = container.querySelector(".Select__single-value");
 
     expect(selectedValueContainer.textContent).toBe(options[0].label);
 
-    rerender(<Select value={options[1].value} onChange={onChange} options={options} />);
+    rerender(<Select id="some-test-input" value={options[1].value} onChange={onChange} options={options} />);
 
     expect(container.querySelector(".Select__single-value").textContent).toBe(options[1].label);
   });
@@ -126,12 +126,12 @@ describe("<Select />", () => {
 
     const onChange = jest.fn();
 
-    const { container, rerender } = render(<Select value={options[0].value} onChange={onChange} options={options} />);
+    const { container, rerender } = render(<Select id="some-test-input" value={options[0].value} onChange={onChange} options={options} />);
     const selectedValueContainer = container.querySelector(".Select__single-value");
 
     expect(selectedValueContainer.textContent).toBe(options[0].label);
 
-    rerender(<Select value={null} onChange={onChange} options={options} />);
+    rerender(<Select id="some-test-input" value={null} onChange={onChange} options={options} />);
 
     expect(container.querySelector(".Select__single-value")).not.toBeInTheDocument();
   });
@@ -150,12 +150,12 @@ describe("<Select />", () => {
 
     const onChange = jest.fn();
 
-    const { container, rerender } = render(<Select value={options[0].value} onChange={onChange} options={options} />);
+    const { container, rerender } = render(<Select id="some-test-input" value={options[0].value} onChange={onChange} options={options} />);
     const selectedValueContainer = container.querySelector(".Select__single-value");
 
     expect(selectedValueContainer.textContent).toBe(options[0].label);
 
-    rerender(<Select value={undefined} onChange={onChange} options={options} />);
+    rerender(<Select id="some-test-input" value={undefined} onChange={onChange} options={options} />);
 
     expect(container.querySelector(".Select__single-value")).not.toBeInTheDocument();
   });
diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx
index c2712cf25f..4efcd380a8 100644
--- a/src/renderer/components/select/select.tsx
+++ b/src/renderer/components/select/select.tsx
@@ -30,7 +30,10 @@ export interface SelectOption<T = any> {
   label?: React.ReactNode;
 }
 
-export interface SelectProps<T = any> extends ReactSelectProps<T, boolean>, CreatableProps<T, boolean> {
+export interface SelectProps<T = any>
+  extends ReactSelectProps<T, boolean>,
+    CreatableProps<T, boolean> {
+  id: string;
   value?: T;
   themeName?: "dark" | "light" | "outlined" | "lens";
   menuClass?: string;
@@ -41,7 +44,7 @@ export interface SelectProps<T = any> extends ReactSelectProps<T, boolean>, Crea
 
 @observer
 export class Select extends React.Component<SelectProps> {
-  static defaultProps: SelectProps = {
+  static defaultProps: Omit<SelectProps, "id"> = {
     autoConvertOptions: true,
     menuPortalTarget: document.body,
     menuPlacement: "auto",
@@ -53,7 +56,8 @@ export class Select extends React.Component<SelectProps> {
   }
 
   @computed get themeClass() {
-    const themeName = this.props.themeName || ThemeStore.getInstance().activeTheme.type;
+    const themeName =
+      this.props.themeName || ThemeStore.getInstance().activeTheme.type;
 
     return `theme-${themeName}`;
   }
@@ -88,7 +92,9 @@ export class Select extends React.Component<SelectProps> {
 
     if (autoConvertOptions && Array.isArray(options)) {
       return options.map(opt => {
-        return this.isValidOption(opt) ? opt : { value: opt, label: String(opt) };
+        return this.isValidOption(opt)
+          ? opt
+          : { value: opt, label: String(opt) };
       });
     }
 
@@ -114,13 +120,21 @@ export class Select extends React.Component<SelectProps> {
 
   render() {
     const {
-      className, menuClass, isCreatable, autoConvertOptions,
-      value, options, components = {}, ...props
+      className,
+      menuClass,
+      isCreatable,
+      autoConvertOptions,
+      value,
+      options,
+      components = {},
+      id: inputId,
+      ...props
     } = this.props;
     const WrappedMenu = components.Menu ?? Menu;
 
     const selectProps: Partial<SelectProps> = {
       ...props,
+      inputId,
       styles: this.styles,
       value: autoConvertOptions ? this.selectedOption : value,
       options: autoConvertOptions ? this.options : options,