From 8ed932bb603d4219f6ceb8421b937e5015f06a91 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Thu, 29 Feb 2024 07:38:09 +0100
Subject: [PATCH] Select: Add instructions for resetting a value (#83603)

---
 .../src/components/Select/Select.mdx          | 71 ++++++++++++++++---
 1 file changed, 60 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/Select.mdx b/packages/grafana-ui/src/components/Select/Select.mdx
index 78318d59314..5af27ea2344 100644
--- a/packages/grafana-ui/src/components/Select/Select.mdx
+++ b/packages/grafana-ui/src/components/Select/Select.mdx
@@ -1,8 +1,11 @@
-import { ArgTypes, Preview } from '@storybook/blocks';
-import { Select, AsyncSelect, MultiSelect, AsyncMultiSelect } from './Select';
-import { generateOptions } from './mockOptions';
+import { ArgTypes } from '@storybook/blocks';
+import { Select, AsyncSelect } from './Select';
 
-# Select variants
+# Select
+
+Select is the base for every component on this page. The approaches mentioned here are also applicable to `AsyncSelect`, `MultiSelect`, `AsyncMultiSelect`.
+
+## Select variants
 
 Select is an input with the ability to search and create new values. It should be used when you have a list of options. If the data has a tree structure, consider using `Cascader` instead.
 Select has some features:
@@ -12,10 +15,6 @@ Select has some features:
 - Select from async data
 - Create custom values that aren't in the list
 
-## Select
-
-Select is the base for every component on this page. The approaches mentioned here are also applicable to `AsyncSelect`, `MultiSelect`, `AsyncMultiSelect`.
-
 ### Options format
 
 There are four properties for each option:
@@ -61,6 +60,57 @@ const SelectComponent = () => {
 };
 ```
 
+### Resetting selected value from outside the component
+
+If you want to reset the selected value from outside the component, e.g. if there are two Select components that should be in sync, you can set the dependent Select value to `null` in the `onChange` handler of the first Select component.
+
+```tsx
+import React, { useState } from 'react';
+import { Select } from '@grafana/ui';
+
+const SelectComponent = () => {
+  const [person, setPerson] = useState<string | undefined>('');
+  const [team, setTeam] = useState<string | undefined | null>('');
+
+  return (
+    <form>
+      <Select
+        onChange={({ value }) => {
+          setPerson(value);
+          setTeam(null); // Setting the team to null will reset the selected value in the team Select
+        }}
+        options={[
+          {
+            value: 'option1',
+            label: 'Option 1',
+          },
+          {
+            value: 'option2',
+            label: 'Option 2',
+          },
+        ]}
+        value={person}
+        backspaceRemovesValue
+      />
+      <Select
+        onChange={({ value }) => setTeam(value)}
+        options={[
+          {
+            value: 'team1',
+            label: 'Team 1',
+          },
+          {
+            value: 'team',
+            label: 'Team 2',
+          },
+        ]}
+        value={team}
+      />
+    </form>
+  );
+};
+```
+
 ## AsyncSelect
 
 Like regular Select, but handles fetching options asynchronously. Use the `loadOptions` prop for the async function that loads the options. If `defaultOptions` is set to `true`, `loadOptions` will be called when the component is mounted.
@@ -83,7 +133,6 @@ const basicSelectAsync = () => {
     />
   );
 };
-
 ```
 
 Where the async function could look like this:
@@ -126,7 +175,7 @@ const multiSelect = () => {
 
 Like MultiSelect but handles data asynchronously with the `loadOptions` prop.
 
-# Testing
+## Testing
 
 Using React Testing Library, you can select the `<Select />` using its matching label, such as the label assigned with the `inputId` prop. Use the `react-select-event` package to select values from the options.
 
@@ -156,6 +205,6 @@ it('should call onChange', () => {
 });
 ```
 
-# Props
+## Props
 
 <ArgTypes of={Select} />