DateBox - Should not render two dropdown icons in FF on mobile device…

…(T1197922) (#26283)
DevExpress · Dec 19, 2023 · 79b6cea · 79b6cea
1 parent b77a126
commit 79b6cea
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/packages/devextreme/js/ui/date_box/ui.date_box.base.js b/packages/devextreme/js/ui/date_box/ui.date_box.base.js
@@ -6,6 +6,7 @@ import { each } from '../../core/utils/iterator';
 import { extend } from '../../core/utils/extend';
 import { inputType } from '../../core/utils/support';
 import devices from '../../core/devices';
+import browser from '../../core/utils/browser';
 import config from '../../core/config';
 import dateUtils from '../../core/utils/date';
 import uiDateUtils from './ui.date_utils';
@@ -88,7 +89,7 @@ const DateBox = DropDownEditor.inherit({
 
             disabledDates: null,
 
-            pickerType: PICKER_TYPE['calendar'],
+            pickerType: PICKER_TYPE.calendar,
 
             invalidDateMessage: messageLocalization.format('dxDateBox-validation-datetime'),
 
@@ -161,8 +162,22 @@ const DateBox = DropDownEditor.inherit({
             pickerType = PICKER_TYPE.list;
         }
 
-        this.option('showDropDownButton', devices.real().platform !== 'generic' || pickerType !== PICKER_TYPE['native']);
         this._pickerType = pickerType;
+
+        this._setShowDropDownButtonOption();
+    },
+
+    _setShowDropDownButtonOption() {
+        const platform = devices.real().platform;
+        const isMozillaOnAndroid = platform === 'android' && browser.mozilla;
+        const isNativePickerType = this._isNativeType();
+        let showDropDownButton = platform !== 'generic' || !isNativePickerType;
+
+        if(isNativePickerType && isMozillaOnAndroid) { // T1197922
+            showDropDownButton = false;
+        }
+
+        this.option({ showDropDownButton });
     },
 
     _init: function() {
@@ -624,7 +639,7 @@ const DateBox = DropDownEditor.inherit({
     },
 
     _isNativeType: function() {
-        return this._pickerType === PICKER_TYPE['native'];
+        return this._pickerType === PICKER_TYPE.native;
     },
 
     _updatePopupTitle: function() {

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js
@@ -21,6 +21,7 @@ import uiDateUtils from 'ui/date_box/ui.date_utils';
 import { noop } from 'core/utils/common';
 import { logger } from 'core/utils/console';
 import { normalizeKeyName } from 'events/utils/index';
+import browser from 'core/utils/browser';
 
 import '../../helpers/calendarFixtures.js';
 
@@ -6418,3 +6419,26 @@ QUnit.module('validation', {
         assert.strictEqual(this.$dateBox.hasClass(SHOW_INVALID_BADGE_CLASS), false, 'validation icon is be hidden');
     });
 });
+
+QUnit.module('Device specific tests', {
+    beforeEach: function() {
+        this._savedDevice = devices.real();
+        devices.real({ platform: 'android', deviceType: 'phone', version: [4, 4, 2], android: true });
+    },
+    afterEach: function() {
+        devices.real(this._savedDevice);
+    },
+}, () => {
+    QUnit.test('DateBox should not render dropDownButton in Mozilla on android(T1197922)', function(assert) {
+        const dateValue = new Date(2016, 6, 15, 14, 30);
+        const isMozilla = browser.mozilla;
+        const $dateBox = $('#dateBox').dxDateBox({
+            pickerType: 'native',
+            value: dateValue
+        });
+
+        const $dropDownButton = $dateBox.find(`.${DROP_DOWN_BUTTON_CLASS}`);
+
+        assert.strictEqual($dropDownButton.length, isMozilla ? 0 : 1, `dropDownButton is ${isMozilla ? 'not' : ''} rendered`);
+    });
+});