From e000d52602692294a6d1c134d0c5d3fdf527c7e6 Mon Sep 17 00:00:00 2001
From: Olga Studzenichnik <okrypets@gmail.com>
Date: Wed, 29 Dec 2021 13:59:38 +0300
Subject: [PATCH] [Dropdown]: fix hide dropdown body on mobile after opening
 keyboard

---
 uui-components/src/overlays/Dropdown.tsx       | 4 +++-
 uui-components/src/pickers/PickerInputBase.tsx | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/uui-components/src/overlays/Dropdown.tsx b/uui-components/src/overlays/Dropdown.tsx
index 33694e7e49..aa04feedc7 100644
--- a/uui-components/src/overlays/Dropdown.tsx
+++ b/uui-components/src/overlays/Dropdown.tsx
@@ -41,6 +41,8 @@ export interface DropdownProps extends Partial<IEditable<boolean>> {
 
     portalTarget?: HTMLElement;
     boundaryElement?: Boundary;
+
+    closeBodyOnTogglerHidden?: boolean; // default: true; Set false if you do not want to hide the dropdown body in case Toggler is out of the viewport
 }
 
 export class Dropdown extends React.Component<DropdownProps, DropdownState> {
@@ -191,7 +193,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
             }
         };
 
-        if (isReferenceHidden && (this.state.opened || this.props.value)) {
+        if (isReferenceHidden && this.props.closeBodyOnTogglerHidden !== false && (this.state.opened || this.props.value)) {
             // Yes, we know that it's hack and we can perform setState in render, but we don't have other way to do it in this case
             setTimeout(() => { this.handleOpenedChange(false); }, 0);
             return null;
diff --git a/uui-components/src/pickers/PickerInputBase.tsx b/uui-components/src/pickers/PickerInputBase.tsx
index 6aa83b607b..cdfbe5bbe9 100644
--- a/uui-components/src/pickers/PickerInputBase.tsx
+++ b/uui-components/src/pickers/PickerInputBase.tsx
@@ -281,6 +281,7 @@ export abstract class PickerInputBase<TItem, TId, TProps> extends PickerBase<TIt
                 onValueChange={ !this.props.isDisabled && this.toggleBodyOpening }
                 placement={ this.props.dropdownPlacement }
                 modifiers={ this.popperModifiers }
+                closeBodyOnTogglerHidden={ !isMobile() }
             />
         );
     }