From 0f9526ba9f11c9950b459f85e62a37c96dc6701a Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <38059171+askvortsov1@users.noreply.github.com>
Date: Mon, 19 Apr 2021 10:36:04 -0400
Subject: [PATCH] Adjust search height on resize (#2775)

Identified as a potential issue in https://github.com/flarum/core/pull/2650

When typing, the keyboard generally obstructs half the screen. However, when the keyboard is closed, search results don't expand to take up full space.
---
 js/src/forum/components/Search.js | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/js/src/forum/components/Search.js b/js/src/forum/components/Search.js
index ddcb751a8..248f9e1fc 100644
--- a/js/src/forum/components/Search.js
+++ b/js/src/forum/components/Search.js
@@ -114,6 +114,15 @@ export default class Search extends Component {
     );
   }
 
+  updateMaxHeight() {
+    // Since extensions might add elements above the search box on mobile,
+    // we need to calculate and set the max height dynamically.
+    const resultsElementMargin = 14;
+    const maxHeight =
+      window.innerHeight - this.element.querySelector('.Search-input>.FormControl').getBoundingClientRect().bottom - resultsElementMargin;
+    this.element.querySelector('.Search-results').style['max-height'] = `${maxHeight}px`;
+  }
+
   onupdate() {
     // Highlight the item that is currently selected.
     this.setIndex(this.getCurrentNumericIndex());
@@ -121,12 +130,7 @@ export default class Search extends Component {
     // If there are no sources, the search view is not shown.
     if (!this.sources.length) return;
 
-    // Since extensions might add elements above the search box on mobile,
-    // we need to calculate and set the max height dynamically.
-    const resultsElementMargin = 14;
-    const maxHeight =
-      window.innerHeight - this.element.querySelector('.Search-input>.FormControl').getBoundingClientRect().bottom - resultsElementMargin;
-    this.element.querySelector('.Search-results').style['max-height'] = `${maxHeight}px`;
+    this.updateMaxHeight();
   }
 
   oncreate(vnode) {
@@ -191,6 +195,13 @@ export default class Search extends Component {
           .one('mouseup', (e) => e.preventDefault())
           .select();
       });
+
+    this.updateMaxHeightHandler = this.updateMaxHeight.bind(this);
+    window.addEventListener('resize', this.updateMaxHeightHandler);
+  }
+
+  onremove() {
+    window.removeEventListener('resize', this.updateMaxHeightHandler);
   }
 
   /**