ColorBox: value should be formatted to rgba after apply on tab (T1193…

…656) (#25755)
DevExpress · Oct 9, 2023 · f9ce308 · f9ce308
1 parent 6182bb6
commit f9ce308
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/packages/devextreme/js/ui/color_box/color_box.js b/packages/devextreme/js/ui/color_box/color_box.js
@@ -344,11 +344,16 @@ const ColorBox = DropDownEditor.inherit({
     },
 
     _applyColorFromInput: function(value) {
+        const { editAlphaChannel } = this.option();
         const newColor = new Color(value);
 
         if(newColor.colorIsInvalid) {
             this._resetInputValue();
-            value = this.option('value');
+            return this.option('value');
+        }
+
+        if(editAlphaChannel) {
+            return colorUtils.makeRgba(value);
         }
 
         return value;

diff --git a/packages/devextreme/testing/testcafe/model/colorbox.ts b/packages/devextreme/testing/testcafe/model/colorbox.ts
@@ -1,7 +1,25 @@
 import { WidgetName } from '../helpers/createWidget';
 import Widget from './internal/widget';
+import Popup from './popup';
+
+const CLASS = {
+  input: 'dx-texteditor-input',
+  popup: 'dx-popup',
+};
 
 export default class ColorBox extends Widget {
+  input: Selector;
+
+  constructor(id: string | Selector) {
+    super(id);
+
+    this.input = this.element.find(`.${CLASS.input}`);
+  }
+
+  getPopup(): Popup {
+    return new Popup(this.element.find(`.${CLASS.popup}`));
+  }
+
   // eslint-disable-next-line class-methods-use-this
   getName(): WidgetName { return 'dxColorBox'; }
 }
diff --git a/packages/devextreme/testing/testcafe/tests/editors/colorbox/colorbox.ts b/packages/devextreme/testing/testcafe/tests/editors/colorbox/colorbox.ts
@@ -1,12 +1,15 @@
 import { Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import ColorBox from '../../../model/colorbox';
 import url from '../../../helpers/getPageUrl';
 import createWidget from '../../../helpers/createWidget';
 import { testScreenshot } from '../../../helpers/themeUtils';
 import { appendElementTo, setStyleAttribute } from '../../../helpers/domUtils';
+import { clearTestPage } from '../../../helpers/clearPage';
 
 fixture.disablePageReloads`Colorbox`
-  .page(url(__dirname, '../../container.html'));
+  .page(url(__dirname, '../../container.html'))
+  .afterEach(async () => clearTestPage());
 
 test('Colorbox should display full placeholder', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -25,3 +28,25 @@ test('Colorbox should display full placeholder', async (t) => {
     placeholder: 'I am a very long placeholder',
   }, '#colorBox');
 });
+
+['#00ffff', 'rgb(0,255,255)', 'rgba(0,255,255,1)', 'aqua'].forEach((inputText) => {
+  ['enter', 'tab'].forEach((key) => {
+    test(`input value=${inputText} should be formatted to rgba after apply on ${key} key press`, async (t) => {
+      const colorBox = new ColorBox('#container');
+      const expectedValue = 'rgba(0, 255, 255, 1)';
+
+      await t
+        .click(colorBox.input);
+
+      await t
+        .typeText(colorBox.input, inputText)
+        .pressKey(key)
+        .expect(colorBox.option('text'))
+        .eql(expectedValue)
+        .expect(colorBox.option('value'))
+        .eql(expectedValue);
+    }).before(async () => createWidget('dxColorBox', {
+      editAlphaChannel: true,
+    }, '#container'));
+  });
+});