FileUploader: should be shown after press enter key on dxButton (T117…

…8836) (#25803) Signed-off-by: Alexander Bulychev <[email protected]> Co-authored-by: Alexander Bulychev <[email protected]> Co-authored-by: Anton Kuznetsov <[email protected]>
DevExpress · Oct 12, 2023 · 7eaaae4 · 7eaaae4
1 parent 362cbd8
commit 7eaaae4
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 5 deletions.
diff --git a/js/renovation/ui/__tests__/button.test.tsx b/js/renovation/ui/__tests__/button.test.tsx
@@ -331,12 +331,12 @@ describe('Button', () => {
               originalEvent,
             };
             const button = new Button({ onClick });
+            const stub = jest.fn();
+
+            button.contentRef = { current: { click: stub } } as any;
             button.keyDown(options);
             expect(options.originalEvent.preventDefault).toHaveBeenCalled();
-            expect(onClick).toHaveBeenCalledTimes(1);
-            expect(onClick).toHaveBeenCalledWith({
-              event: options.originalEvent,
-            });
+            expect(stub).toHaveBeenCalledTimes(1);
           });
 
           it('should not simulate click by common keys down', () => {

diff --git a/js/renovation/ui/button.tsx b/js/renovation/ui/button.tsx
@@ -251,12 +251,16 @@ export class Button extends JSXComponent(ButtonProps) {
 
     if (keyName === 'space' || which === 'space' || keyName === 'enter' || which === 'enter') {
       (originalEvent as Event).preventDefault();
-      this.onWidgetClick(originalEvent as Event);
+      this.emitClickEvent();
     }
 
     return undefined;
   }
 
+  emitClickEvent(): void {
+    this.contentRef.current!.click();
+  }
+
   get aria(): Record<string, string> {
     const { text, icon } = this.props;
 

diff --git a/testing/tests/DevExpress.ui.widgets.editors/fileUploader.tests.js b/testing/tests/DevExpress.ui.widgets.editors/fileUploader.tests.js
@@ -4338,3 +4338,35 @@ QUnit.module('readOnly option', moduleConfig, () => {
 
 });
 
+QUnit.module('dxButton integration', moduleConfig, () => {
+    QUnit.test('dialog should be shown after press enter key on dxButton (T1178836)', function(assert) {
+        if(devices.real().deviceType !== 'desktop') {
+            assert.ok(true, 'keyboard is not supported for not generic devices');
+            return;
+        }
+
+        const $customDialogTrigger = $('<div>').appendTo('#qunit-fixture');
+
+        $customDialogTrigger.dxButton({
+            text: 'button'
+        });
+
+        const instance = $('#fileuploader').dxFileUploader({
+            dialogTrigger: $customDialogTrigger,
+            visible: false
+        }).dxFileUploader('instance');
+        const spy = sinon.spy();
+
+        $(`.${FILEUPLOADER_INPUT_CLASS}`).on('click', spy);
+
+        instance.option({
+            uploadMode: 'useButtons',
+        });
+        assert.strictEqual(spy.callCount, 0, 'click on input not fired');
+
+        const keyboard = keyboardMock($customDialogTrigger);
+        keyboard.keyDown('enter');
+
+        assert.strictEqual(spy.callCount, 1, 'click on input fired');
+    });
+});
diff --git a/testing/tests/DevExpress.ui.widgets/button.tests.js b/testing/tests/DevExpress.ui.widgets/button.tests.js
@@ -398,6 +398,24 @@ QUnit.module('Button', function() {
             assert.equal(clickFired, 2, 'press space on button call click action');
         });
 
+        QUnit.test('click event is fired on "enter" press', function(assert) {
+            const $element = $('#button').dxButton({
+                focusStateEnabled: true
+            });
+            const handler = sinon.spy();
+
+            $element.on('click', handler);
+
+            const keyboard = keyboardMock($element);
+
+            $element.trigger('focusin');
+            keyboard.keyDown('enter');
+            assert.strictEqual(handler.callCount, 1, 'press enter on button call click action');
+
+            keyboard.keyDown('space');
+            assert.strictEqual(handler.callCount, 2, 'press space on button call click action');
+        });
+
         QUnit.test('arguments on key press', function(assert) {
             const clickHandler = sinon.spy();