Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form: Hide opened DropDownEditor popup on label click in form (T1257945) #28535

Merged
merged 5 commits into from
Dec 17, 2024
Merged

Form: Hide opened DropDownEditor popup on label click in form (T1257945) #28535

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6736b45
Hide opened DropDownEditor popup on label click in form (T1257945)
anna-shakhova Dec 11, 2024
732378c
Form: test improvements (T1257945)
anna-shakhova Dec 12, 2024
610c734
Form: test improvements (T1257945)
anna-shakhova Dec 12, 2024
1e392d2
Form: combine test cases in forEach (T1257945)
anna-shakhova Dec 12, 2024
fdbfb4b
Form: minor improvements (T1257945)
anna-shakhova Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 117 additions & 17 deletions packages/devextreme/js/__internal/ui/form/m_form.layout_manager.utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,40 @@
import Guid from '@js/core/guid';
import $ from '@js/core/renderer';
import { extend } from '@js/core/utils/extend';
import { captionize } from '@js/core/utils/inflector';
import { each } from '@js/core/utils/iterator';
import { isDefined } from '@js/core/utils/type';
import { isBoolean, isDefined, isFunction } from '@js/core/utils/type';
import type { dxDropDownEditorOptions } from '@js/ui/drop_down_editor/ui.drop_down_editor';
import type { FormItemComponent } from '@js/ui/form';
import type dxTextBox from '@js/ui/text_box';

import { SIMPLE_ITEM_TYPE } from './constants';

const EDITORS_WITH_ARRAY_VALUE = ['dxTagBox', 'dxRangeSlider', 'dxDateRangeBox'];
const EDITORS_WITH_ARRAY_VALUE = [
'dxTagBox',
'dxRangeSlider',
'dxDateRangeBox',
];
const EDITORS_WITH_SPECIFIC_LABELS = ['dxRangeSlider', 'dxSlider'];
export const EDITORS_WITHOUT_LABELS = ['dxCalendar', 'dxCheckBox', 'dxHtmlEditor', 'dxRadioGroup', 'dxRangeSlider', 'dxSlider', 'dxSwitch'];
export const EDITORS_WITHOUT_LABELS = [
'dxCalendar',
'dxCheckBox',
'dxHtmlEditor',
'dxRadioGroup',
'dxRangeSlider',
'dxSlider',
'dxSwitch',
];
const DROP_DOWN_EDITORS: FormItemComponent[] = [
'dxSelectBox',
'dxDropDownBox',
'dxTagBox',
'dxLookup',
'dxAutocomplete',
'dxColorBox',
'dxDateBox',
'dxDateRangeBox',
];

export function convertToRenderFieldItemOptions({
$parent,
Expand All @@ -33,7 +59,9 @@ export function convertToRenderFieldItemOptions({
labelMode,
onLabelTemplateRendered,
}) {
const isRequired = isDefined(item.isRequired) ? item.isRequired : !!_hasRequiredRuleInSet(item.validationRules);
const isRequired = isDefined(item.isRequired)
? item.isRequired
: !!_hasRequiredRuleInSet(item.validationRules);
const isSimpleItem = item.itemType === SIMPLE_ITEM_TYPE;
const helpID = item.helpText ? `dx-${new Guid()}` : null;

Expand All @@ -49,11 +77,16 @@ export function convertToRenderFieldItemOptions({
onLabelTemplateRendered,
});

const needRenderLabel = labelOptions.visible && (labelOptions.text || (labelOptions.labelTemplate && isSimpleItem));
const needRenderLabel = labelOptions.visible
&& (labelOptions.text || (labelOptions.labelTemplate && isSimpleItem));
const { location: labelLocation, labelID } = labelOptions;
const labelNeedBaselineAlign = labelLocation !== 'top' && ['dxTextArea', 'dxRadioGroup', 'dxCalendar', 'dxHtmlEditor'].includes(item.editorType);
const labelNeedBaselineAlign = labelLocation !== 'top'
&& ['dxTextArea', 'dxRadioGroup', 'dxCalendar', 'dxHtmlEditor'].includes(
item.editorType,
);

const editorOptions = _convertToEditorOptions({
$parent,
editorType: item.editorType,
editorValue,
defaultEditorName: item.dataField,
Expand All @@ -70,8 +103,9 @@ export function convertToRenderFieldItemOptions({
});

const needRenderOptionalMarkAsHelpText = labelOptions.markOptions.showOptionalMark
&& !labelOptions.visible && editorOptions.labelMode !== 'hidden'
&& !isDefined(item.helpText);
&& !labelOptions.visible
&& editorOptions.labelMode !== 'hidden'
&& !isDefined(item.helpText);

const helpText = needRenderOptionalMarkAsHelpText
? labelOptions.markOptions.optionalMark
Expand Down Expand Up @@ -102,18 +136,26 @@ export function convertToRenderFieldItemOptions({
}

export function getLabelMarkText({
showRequiredMark, requiredMark, showOptionalMark, optionalMark,
showRequiredMark,
requiredMark,
showOptionalMark,
optionalMark,
}) {
if (!showRequiredMark && !showOptionalMark) {
return '';
}

return String.fromCharCode(160) + (showRequiredMark ? requiredMark : optionalMark);
return (
String.fromCharCode(160) + (showRequiredMark ? requiredMark : optionalMark)
);
}

export function convertToLabelMarkOptions({
showRequiredMark, requiredMark, showOptionalMark, optionalMark,
}, isRequired?: boolean) {
export function convertToLabelMarkOptions(
{
showRequiredMark, requiredMark, showOptionalMark, optionalMark,
},
isRequired?: boolean,
) {
return {
showRequiredMark: showRequiredMark && isRequired,
requiredMark,
Expand All @@ -124,6 +166,7 @@ export function convertToLabelMarkOptions({

// eslint-disable-next-line @typescript-eslint/naming-convention
function _convertToEditorOptions({
$parent,
editorType,
defaultEditorName,
editorValue,
Expand Down Expand Up @@ -153,10 +196,46 @@ function _convertToEditorOptions({
const stylingMode = externalEditorOptions?.stylingMode || editorStylingMode;
const useSpecificLabelOptions = EDITORS_WITH_SPECIFIC_LABELS.includes(editorType);

let editorOptionsWithDropDown: Partial<dxDropDownEditorOptions<dxTextBox>> = {};
const useDropDownOptions = DROP_DOWN_EDITORS.includes(editorType);

if (useDropDownOptions) {
editorOptionsWithDropDown = {
onContentReady: (e) => {
const { component } = e;
const openOnFieldClick = component.option('openOnFieldClick');
const initialHideOnOutsideClick = component.option('dropDownOptions.hideOnOutsideClick');

if (openOnFieldClick) {
component.option('dropDownOptions', {
hideOnOutsideClick: (e) => {
if (isBoolean(initialHideOnOutsideClick)) {
return initialHideOnOutsideClick;
}

const $target = $(e.target);
const $label = $parent.find(`label[for="${editorInputId}"]`);

const isLabelClicked = !!$target.closest($label).length;
const initialResult = isFunction(initialHideOnOutsideClick) ? !!initialHideOnOutsideClick(e) : true;

return !isLabelClicked && initialResult;
},
});
}

if (isFunction(externalEditorOptions?.onContentReady)) {
externalEditorOptions.onContentReady(e);
}
},
};
}

const result = extend(
true,
editorOptionsWithValue,
externalEditorOptions,
editorOptionsWithDropDown,
{
inputAttr: { id: editorInputId },
validationBoundary: editorValidationBoundary,
Expand Down Expand Up @@ -201,15 +280,27 @@ function _hasRequiredRuleInSet(rules) {

// eslint-disable-next-line @typescript-eslint/naming-convention
function _convertToLabelOptions({
item, id, isRequired, managerMarkOptions, showColonAfterLabel, labelLocation, labelTemplate, formLabelMode, onLabelTemplateRendered,
item,
id,
isRequired,
managerMarkOptions,
showColonAfterLabel,
labelLocation,
labelTemplate,
formLabelMode,
onLabelTemplateRendered,
}) {
const isEditorWithoutLabels = EDITORS_WITHOUT_LABELS.includes(item.editorType);
const isEditorWithoutLabels = EDITORS_WITHOUT_LABELS.includes(
item.editorType,
);
const labelOptions = extend(
{
showColon: showColonAfterLabel,
location: labelLocation,
id,
visible: formLabelMode === 'outside' || (isEditorWithoutLabels && formLabelMode !== 'hidden'),
visible:
formLabelMode === 'outside'
|| (isEditorWithoutLabels && formLabelMode !== 'hidden'),
isRequired,
},
item ? item.label : {},
Expand All @@ -220,7 +311,16 @@ function _convertToLabelOptions({
},
);

const editorsRequiringIdForLabel = ['dxRadioGroup', 'dxCheckBox', 'dxLookup', 'dxSlider', 'dxRangeSlider', 'dxSwitch', 'dxHtmlEditor', 'dxDateRangeBox']; // TODO: support "dxCalendar"
const editorsRequiringIdForLabel = [
'dxRadioGroup',
'dxCheckBox',
'dxLookup',
'dxSlider',
'dxRangeSlider',
'dxSwitch',
'dxHtmlEditor',
'dxDateRangeBox',
]; // TODO: support "dxCalendar"
if (editorsRequiringIdForLabel.includes(item.editorType)) {
labelOptions.labelID = `dx-label-${new Guid()}`;
}
Expand Down
93 changes: 93 additions & 0 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import { TOOLBAR_CLASS } from '__internal/ui/toolbar/m_constants';

import 'ui/html_editor';
import '../../helpers/ignoreQuillTimers.js';
import pointerMock from '../../helpers/pointerMock.js';
import 'ui/lookup';
import 'ui/radio_group';
import 'ui/tag_box';
Expand Down Expand Up @@ -4540,6 +4541,98 @@ QUnit.test('form should be dirty when some editors are dirty', function(assert)
assert.strictEqual(form.option('isDirty'), false, 'form is not dirty when all editors are back to pristine');
});

[true, false].forEach((openOnFieldClick) => {
[true, false].forEach((hideOnOutsideClickValue) => {
QUnit.test(`Opened DropDownList must hide on input label click, openOnFieldClick: ${openOnFieldClick}, hideOnOutsideClick: ${hideOnOutsideClickValue} (T1257945)`, function(assert) {
let initialHideOnOutsideClick;
const $form = $('#form').dxForm({
formData: { CustomerID: 'VINET' },
items: [{
itemType: 'group',
colCount: 2,
items: [{
dataField: 'CustomerID',
editorType: 'dxSelectBox',
editorOptions: {
items: ['VINET', 'VALUE', 'VINS'],
value: '',
openOnFieldClick,
dropDownOptions: {
hideOnOutsideClick: () => hideOnOutsideClickValue,
onContentReady: ({ component }) => {
initialHideOnOutsideClick = component.option('hideOnOutsideClick');
}
}
},
}],
}],
});

const $dropDownButton = $form.find('.dx-dropdowneditor-button');
$dropDownButton.trigger('click');

const hideOnOutsideClickSpy = sinon.spy(initialHideOnOutsideClick);
const formInstance = $form.dxForm('instance');
const editorInstance = formInstance.getEditor('CustomerID');

formInstance.option('items[0].items[0].editorOptions.dropDownOptions.hideOnOutsideClick', hideOnOutsideClickSpy);

assert.true(editorInstance.option('opened'), 'drop down list is visible');

const $label = $form.find('.dx-field-item-label-text');
pointerMock($label).click();

const expected = openOnFieldClick ? false : hideOnOutsideClickValue;
assert.ok(hideOnOutsideClickSpy.returned(expected), `hideOnOutsideClick returned ${expected}`);

sinon.restore();
});
});

QUnit.test(`Opened DropDownList must hide on input label click, openOnFieldClick: ${openOnFieldClick}, hideOnOutsideClick not defined (T1257945)`, function(assert) {
let initialHideOnOutsideClick;
const $form = $('#form').dxForm({
formData: { CustomerID: 'VINET' },
items: [{
itemType: 'group',
colCount: 2,
items: [{
dataField: 'CustomerID',
editorType: 'dxSelectBox',
editorOptions: {
items: ['VINET', 'VALUE', 'VINS'],
value: '',
openOnFieldClick,
dropDownOptions: {
onContentReady: ({ component }) => {
initialHideOnOutsideClick = component.option('hideOnOutsideClick');
}
}
},
}],
}],
});

const $dropDownButton = $form.find('.dx-dropdowneditor-button');
$dropDownButton.trigger('click');

const hideOnOutsideClickSpy = sinon.spy(initialHideOnOutsideClick);
const formInstance = $form.dxForm('instance');
const editorInstance = formInstance.getEditor('CustomerID');

formInstance.option('items[0].items[0].editorOptions.dropDownOptions.hideOnOutsideClick', hideOnOutsideClickSpy);

assert.true(editorInstance.option('opened'), 'drop down list is visible');

const $label = $form.find('.dx-field-item-label-text');
pointerMock($label).click();

assert.ok(hideOnOutsideClickSpy.returned(!openOnFieldClick), `hideOnOutsideClick returned ${!openOnFieldClick}`);

sinon.restore();
});
});

QUnit.module('reset', () => {
[
['dxCalendar', new Date(2019, 1, 2), { dxCalendar: new Date(2019, 1, 3) } ],
Expand Down
Loading