List: prevent radio button from remaining active after double-click if another radio button is selected (T1294715) (#30141)

Author: pharret31

packages/devextreme/js/__internal/ui/list/m_list.base.ts

@@ -2,7 +2,7 @@ import { fx } from '@js/common/core/animation';
 import { name as clickEventName } from '@js/common/core/events/click';
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import { end as swipeEventEnd } from '@js/common/core/events/swipe';
-import { addNamespace } from '@js/common/core/events/utils/index';
+import { addNamespace } from '@js/common/core/events/utils';
 import messageLocalization from '@js/common/core/localization/message';
 import devices from '@js/core/devices';
 import { getPublicElement } from '@js/core/element';
@@ -20,6 +20,7 @@ import { each } from '@js/core/utils/iterator';
 import { getHeight, getOuterHeight, setHeight } from '@js/core/utils/size';
 import { isDefined, isPlainObject } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
+import type { DxEvent } from '@js/events';
 import Button from '@js/ui/button';
 import type { Item, Properties } from '@js/ui/list';
 import ScrollView from '@js/ui/scroll_view';
@@ -398,11 +399,12 @@ export class ListBase extends CollectionWidget<ListBaseProperties> {
     return this._itemElementsCache;
   }
 
-  _itemSelectHandler(e) {
+  _itemSelectHandler(e: DxEvent) {
     const { selectionMode } = this.option();
 
     const isSingleSelectedItemClicked = selectionMode === 'single'
       && this.isItemSelected(e.currentTarget);
+
     if (isSingleSelectedItemClicked) {
       return;
     }
@@ -417,7 +419,7 @@ export class ListBase extends CollectionWidget<ListBaseProperties> {
     return super._itemSelectHandler(e, isSelectionControlClicked);
   }
 
-  _allowDynamicItemsAppend() {
+  _allowDynamicItemsAppend(): boolean {
     return true;
   }
 

packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.selection.ts

@@ -1,6 +1,6 @@
 import { name as clickEventName } from '@js/common/core/events/click';
 import eventsEngine from '@js/common/core/events/core/events_engine';
-import { addNamespace } from '@js/common/core/events/utils/index';
+import { addNamespace } from '@js/common/core/events/utils';
 import messageLocalization from '@js/common/core/localization/message';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
@@ -49,7 +49,9 @@ class EditDecoratorSelection extends EditDecorator {
     const selectionMode = this._list.option('selectionMode');
 
     this._singleStrategy = selectionMode === 'single';
-    this._containerClass = this._singleStrategy ? SELECT_RADIO_BUTTON_CONTAINER_CLASS : SELECT_CHECKBOX_CONTAINER_CLASS;
+    this._containerClass = this._singleStrategy
+      ? SELECT_RADIO_BUTTON_CONTAINER_CLASS
+      : SELECT_CHECKBOX_CONTAINER_CLASS;
     this._controlClass = this._singleStrategy ? SELECT_RADIO_BUTTON_CLASS : SELECT_CHECKBOX_CLASS;
 
     this._controlWidget = this._singleStrategy ? RadioButton : CheckBox;

packages/devextreme/js/__internal/ui/radio_group/m_radio_button.ts

@@ -1,11 +1,12 @@
 import { name as clickEventName } from '@js/common/core/events/click';
 import eventsEngine from '@js/common/core/events/core/events_engine';
-import { addNamespace } from '@js/common/core/events/utils/index';
+import { addNamespace } from '@js/common/core/events/utils';
 import registerComponent from '@js/core/component_registrator';
 import devices from '@js/core/devices';
 import type { DefaultOptionsRule } from '@js/core/options/utils';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import type { DxEvent } from '@js/events';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { EditorProperties } from '@ts/ui/editor/editor';
 import Editor from '@ts/ui/editor/editor';
@@ -16,9 +17,7 @@ const RADIO_BUTTON_ICON_DOT_CLASS = 'dx-radiobutton-icon-dot';
 const RADIO_BUTTON_CHECKED_CLASS = 'dx-radiobutton-checked';
 const RADIO_BUTTON_ICON_CHECKED_CLASS = 'dx-radiobutton-icon-checked';
 
-export interface RadioButtonProperties extends EditorProperties {
-
-}
+export interface RadioButtonProperties extends EditorProperties {}
 
 class RadioButton extends Editor {
   _$icon?: dxElementWrapper;
@@ -98,25 +97,28 @@ class RadioButton extends Editor {
     // @ts-expect-error ts-error
     const eventName = addNamespace(clickEventName, this.NAME);
 
-    this._clickAction = this._createAction((args) => {
+    this._clickAction = this._createAction((args): void => {
       this._clickHandler(args.event);
     });
 
     eventsEngine.off(this.$element(), eventName);
-    eventsEngine.on(this.$element(), eventName, (e) => {
+    eventsEngine.on(this.$element(), eventName, (e: DxEvent): void => {
       this._clickAction?.({ event: e });
     });
   }
 
   _clickHandler(e): void {
     this._saveValueChangeEvent(e);
     this.option('value', true);
+    this._saveValueChangeEvent(undefined);
   }
 
   _optionChanged(args: OptionChanged<RadioButtonProperties>): void {
-    switch (args.name) {
+    const { name, value } = args;
+
+    switch (name) {
       case 'value':
-        this._renderCheckedState(args.value);
+        this._renderCheckedState(value);
         super._optionChanged(args);
         break;
       default:

packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/editingUITests.js

@@ -377,7 +377,7 @@ QUnit.module('switchable button delete decorator', {
         const $items = $list.find(`.${LIST_ITEM_CLASS}`);
         const $item = $items.eq(0);
 
-        assert.strictEqual($item.children(`.${SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS}`).length, 0, 'delete button won\'t rendered');
+        assert.strictEqual($item.children(`.${SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS}`).length, 0, 'delete button was not rendered');
     });
 
     QUnit.test('button should be added only when item is ready to delete', function(assert) {
@@ -1474,7 +1474,7 @@ QUnit.module('context menu decorator', {
         list.option('allowItemDeleting', false);
 
         const $menu = list.$element().find(`.${CONTEXTMENU_CLASS}`);
-        assert.ok(!$menu.length, 'overlay won\'t created');
+        assert.ok(!$menu.length, 'overlay was not created');
     });
 
     QUnit.test('item hold should not open overlay if widget is disabled', function(assert) {
@@ -2051,7 +2051,7 @@ QUnit.module('selectAll for all pages', () => {
         assert.strictEqual($list.find('.dx-list-item-selected').length, 1, 'selected items should have selected class');
     });
 
-    QUnit.test('selectAll checkbox should change it\'s state to undefined when one item was deselected', function(assert) {
+    QUnit.test('selectAll checkbox should change its state to undefined when one item was deselected', function(assert) {
         const ds = new DataSource({
             store: [1, 2, 3, 4, 5, 6],
             pageSize: 2,
@@ -2595,6 +2595,31 @@ QUnit.module('item select decorator with single selection mode', () => {
         assert.strictEqual(radioButton.option('value'), true, 'item selected');
     });
 
+    QUnit.test('only one item should remain selected after double-clicking on its radio control and then clicking on another item control (T1294715)', function(assert) {
+        const $list = $('#list').dxList({
+            items: [
+                { id: 1, text: 'item 1' },
+                { id: 2, text: 'item 2' },
+            ],
+            showSelectionControls: true,
+            selectionMode: 'single'
+        });
+
+        const $radioButtons = $list.find(`.${SELECT_RADIO_BUTTON_CLASS}`);
+        const $firstRadioButton = $radioButtons.eq(0);
+        const $secondRadioButton = $radioButtons.eq(1);
+
+        $firstRadioButton.trigger('dxclick');
+        $firstRadioButton.trigger('dxclick');
+        $secondRadioButton.trigger('dxclick');
+
+        const firstRadioButtonInstance = $firstRadioButton.dxRadioButton('instance');
+        const secondRadioButtonInstance = $secondRadioButton.dxRadioButton('instance');
+
+        assert.strictEqual(firstRadioButtonInstance.option('value'), false, 'first item is not selected');
+        assert.strictEqual(secondRadioButtonInstance.option('value'), true, 'second item is selected');
+    });
+
     QUnit.test('keyboard navigation should work with without selectAll checkbox', function(assert) {
         const $list = $('#templated-list').dxList({
             focusStateEnabled: true,
@@ -2813,14 +2838,14 @@ QUnit.module('reordering decorator', {
         assert.ok(!$ghostItem.hasClass(REORDERING_ITEM_CLASS), 'reordering class is not present');
 
         assert.equal($ghostItem.css('direction'), 'rtl', 'direction is rtl');
-        assert.ok($ghostItem.parent().hasClass('dx-rtl'), 'ghost\'s parent has dx-rtl class');
+        assert.ok($ghostItem.parent().hasClass('dx-rtl'), 'ghost parent has dx-rtl class');
 
         pointer.dragEnd();
         $ghostItem = $list.find(`.${REORDERING_ITEM_GHOST_CLASS}`);
         assert.strictEqual($items.length, 1, 'duplicate item was removed');
     });
 
-    QUnit.test('cached items doesn\'t contains a ghost item after reordering', function(assert) {
+    QUnit.test('cached items does not contains a ghost item after reordering', function(assert) {
         const $list = $('#list').dxList({
             items: ['0', '1', '2'],
             itemDragging: { allowReordering: true }
@@ -2836,7 +2861,7 @@ QUnit.module('reordering decorator', {
         const cachedItems = list._itemElements();
 
         assert.strictEqual(cachedItems.length, 3, 'Cached items contains 3 items');
-        assert.notOk(cachedItems.hasClass(REORDERING_ITEM_GHOST_CLASS), 'Cached items isn\'t contain a ghost item');
+        assert.notOk(cachedItems.hasClass(REORDERING_ITEM_GHOST_CLASS), 'Cached items does not contain a ghost item');
     });
 
     QUnit.test('ghost item should be moved by drag', function(assert) {