Fixed search bar behavior on iOS
authorAlexander Ebert <ebert@woltlab.com>
Mon, 10 Oct 2016 10:34:13 +0000 (12:34 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Mon, 10 Oct 2016 10:34:13 +0000 (12:34 +0200)
Focusing a text input turns `position: fixed` into `position: absolute`
on iOS.

Fixes #2111

wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js

index 6c5f7c3cb3a75f8a8c37681da224d956b6dd0372..e8a7be88190e9a93b5ac0983d202416a8764120d 100644 (file)
@@ -119,17 +119,35 @@ define(
                        var _searchBar = elById('pageHeaderSearch');
                        var _searchInput = elById('pageHeaderSearchInput');
                        
+                       var scrollTop = null;
+                       
                        EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', function(data) {
                                if (data.identifier === 'com.woltlab.wcf.search') {
+                                       data.handler.close(true);
+                                       
+                                       if (Environment.platform() === 'ios') {
+                                               scrollTop = document.body.scrollTop;
+                                               UiScreen.scrollDisable();
+                                       }
+                                       
                                        _searchBar.style.setProperty('top', elById('pageHeader').offsetHeight + 'px', '');
                                        _searchBar.classList.add('open');
                                        _searchInput.focus();
                                        
-                                       data.handler.close(true);
+                                       if (Environment.platform() === 'ios') {
+                                               document.body.scrollTop = 0;
+                                       }
                                }
                        });
                        
-                       _main.addEventListener(WCF_CLICK_EVENT, function() { _searchBar.classList.remove('open'); });
+                       _main.addEventListener(WCF_CLICK_EVENT, function() {
+                               _searchBar.classList.remove('open');
+                               
+                               if (Environment.platform() === 'ios') {
+                                       UiScreen.scrollEnable();
+                                       document.body.scrollTop = scrollTop; 
+                               }
+                       });
                },
                
                _initButtonGroupNavigation: function() {