From da11a67c4ed468fff609cc501a260c0aa95b5c3f Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 18 Mar 2021 10:35:58 +0000
Subject: [PATCH] Grafana/ui: display all selected levels for selected value
 when searching (#32030) (#32032)

* display all levels for selected values when searching if needed

* add test

(cherry picked from commit e5ca13deb66a64a4d577930ca949d49b3f77c663)

Co-authored-by: Vicky Lee <36230812+vickyyyyyyy@users.noreply.github.com>
---
 .../src/components/Cascader/Cascader.test.tsx         | 11 +++++++++++
 .../grafana-ui/src/components/Cascader/Cascader.tsx   |  4 ++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
index a49c383bbc4..efbd9b2e6c2 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
@@ -88,6 +88,17 @@ describe('Cascader', () => {
     expect(screen.getByText('First / Third')).toBeInTheDocument();
   });
 
+  it('displays selected value with all levels when displayAllSelectedLevels is true and selecting a value from the search', () => {
+    render(
+      <Cascader displayAllSelectedLevels={true} placeholder={placeholder} options={options} onSelect={jest.fn()} />
+    );
+
+    userEvent.type(screen.getByPlaceholderText(placeholder), 'Third');
+    userEvent.click(screen.getByText('First / Third'));
+
+    expect(screen.getByDisplayValue('First / Third')).toBeInTheDocument();
+  });
+
   it('displays all levels selected with default separator when displayAllSelectedLevels is true', () => {
     render(
       <Cascader displayAllSelectedLevels={true} placeholder={placeholder} options={options} onSelect={() => {}} />
diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
index c3e2fcd695e..5cd45e15849 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
@@ -105,7 +105,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
       if (optionPath.indexOf(initValue) === optionPath.length - 1) {
         return {
           rcValue: optionPath,
-          activeLabel: option.singleLabel || '',
+          activeLabel: this.props.displayAllSelectedLevels ? option.label : option.singleLabel || '',
         };
       }
     }
@@ -132,7 +132,7 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
   onSelect = (obj: SelectableValue<string[]>) => {
     const valueArray = obj.value || [];
     this.setState({
-      activeLabel: obj.singleLabel || '',
+      activeLabel: this.props.displayAllSelectedLevels ? obj.label : obj.singleLabel || '',
       rcValue: valueArray,
       isSearching: false,
     });