Merge pull request #304 from AndreyBelym/select-size-mobile

getSelectElementSize must return 1 on Android and iOS (fixes #303)
DevExpress · Dec 2, 2015 · f60f83d · f60f83d
2 parents c7ddd02 + 27a17e0
commit f60f83d
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/src/client/utils/style.js b/src/client/utils/style.js
@@ -1,5 +1,5 @@
 import * as domUtils from './dom';
-import { isIE, isFirefox } from './browser';
+import * as browserUtils from './browser';
 import { styleClass } from '../sandbox/native-methods';
 
 // NOTE: For Chrome.
@@ -149,12 +149,17 @@ export function getOptionHeight (select) {
     if (realSizeValue === 1)
         return getHeight(select);
 
-    return isIE && realSizeValue > childrenCount ?
+    return browserUtils.isIE && realSizeValue > childrenCount ?
            Math.round(selectScrollHeight / childrenCount) :
            Math.round(selectScrollHeight / Math.max(childrenCount, realSizeValue));
 }
 
 export function getSelectElementSize (select) {
+    // NOTE: iOS and Android ignore 'size' and 'multiple' attributes,
+    // all select elements behave like a select with size=1.
+    if (browserUtils.isSafari && browserUtils.hasTouchEvents || browserUtils.isAndroid)
+        return 1;
+
     var sizeAttr     = select.getAttribute('size');
     var multipleAttr = select.getAttribute('multiple');
     var size         = !sizeAttr ? 1 : parseInt(sizeAttr, 10);
@@ -172,7 +177,7 @@ export function isVisibleChild (el) {
     return select && select.tagName.toLowerCase() === 'select' && getSelectElementSize(select) > 1 &&
            (tagName === 'option' || tagName === 'optgroup') &&
            // NOTE: Firefox does not display groups without a label or with an empty label.
-           (!isFirefox || el.label);
+           (!browserUtils.isFirefox || el.label);
 }
 
 export function getScrollLeft (el) {

diff --git a/test/client/fixtures/utils/style-test.js b/test/client/fixtures/utils/style-test.js
@@ -1,4 +1,5 @@
-var styleUtils = hammerhead.get('./utils/style');
+var styleUtils   = hammerhead.get('./utils/style');
+var browserUtils = hammerhead.get('./utils/browser');
 
 test('getBordersWidth', function () {
     var $el = $('<div>')
@@ -187,3 +188,46 @@ test('getOffset', function () {
     document.body.style.border            = '';
     document.documentElement.style.border = '';
 });
+
+test('getSelectElementSize', function () {
+    function createOption (parent, text) {
+        return $('<option>').text(text)
+            .appendTo(parent);
+    }
+
+    function createSelect () {
+        var select = $('<select>')
+            .appendTo(document.body)[0];
+
+        createOption(select, 'one');
+        createOption(select, 'two');
+        createOption(select, 'three');
+        createOption(select, 'four');
+        createOption(select, 'five');
+
+        return select;
+    }
+
+    var select = createSelect();
+    var size   = styleUtils.getSelectElementSize(select);
+
+    strictEqual(size, 1);
+
+    select.setAttribute('size', 4);
+    size = styleUtils.getSelectElementSize(select);
+
+    if (browserUtils.isSafari && browserUtils.hasTouchEvents || browserUtils.isAndroid)
+        strictEqual(size, 1);
+    else
+        strictEqual(size, 4);
+
+    select.removeAttribute('size');
+    select.setAttribute('multiple', 'multiple');
+
+    if (browserUtils.isSafari && browserUtils.hasTouchEvents || browserUtils.isAndroid)
+        strictEqual(size, 1);
+    else
+        strictEqual(size, 4);
+
+    document.body.removeChild(select);
+});