devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
1,064 lines (1,062 loc) • 37.1 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/drop_down_editor/drop_down_editor.js)
* Version: 26.1.3
* Build date: Wed Jun 10 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import animationPosition from "../../../common/core/animation/position";
import {
locate,
move
} from "../../../common/core/animation/translator";
import {
name as clickEventName
} from "../../../common/core/events/click";
import eventsEngine from "../../../common/core/events/core/events_engine";
import {
addNamespace,
isCommandKeyPressed,
normalizeKeyName
} from "../../../common/core/events/utils/index";
import messageLocalization from "../../../common/core/localization/message";
import registerComponent from "../../../core/component_registrator";
import devices from "../../../core/devices";
import {
getPublicElement
} from "../../../core/element";
import Guid from "../../../core/guid";
import $ from "../../../core/renderer";
import {
FunctionTemplate
} from "../../../core/templates/function_template";
import browser from "../../../core/utils/browser";
import {
splitPair
} from "../../../core/utils/common";
import {
extend
} from "../../../core/utils/extend";
import {
getDefaultAlignment
} from "../../../core/utils/position";
import {
isDefined
} from "../../../core/utils/type";
import {
hasWindow
} from "../../../core/utils/window";
import Popup from "../../../ui/popup/ui.popup";
import errors from "../../../ui/widget/ui.errors";
import Widget from "../../../ui/widget/ui.widget";
import {
focused
} from "../../core/utils/m_selectors";
import TextBox from "../../ui/text_box/text_box";
import DropDownButton from "./drop_down_button";
import {
getElementWidth
} from "./utils";
export const DROP_DOWN_EDITOR_CLASS = "dx-dropdowneditor";
const DROP_DOWN_EDITOR_INPUT_WRAPPER = "dx-dropdowneditor-input-wrapper";
const DROP_DOWN_EDITOR_BUTTON_ICON = "dx-dropdowneditor-icon";
const DROP_DOWN_EDITOR_OVERLAY = "dx-dropdowneditor-overlay";
const DROP_DOWN_EDITOR_OVERLAY_FLIPPED = "dx-dropdowneditor-overlay-flipped";
const DROP_DOWN_EDITOR_ACTIVE = "dx-dropdowneditor-active";
const DROP_DOWN_EDITOR_FIELD_CLICKABLE = "dx-dropdowneditor-field-clickable";
const DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER = "dx-dropdowneditor-field-template-wrapper";
export const DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON = "dx-dropdowneditor-field-before-template-wrapper";
export const DROP_DOWN_EDITOR_AFTER_FIELD_ADDON = "dx-dropdowneditor-field-after-template-wrapper";
const OVERLAY_CONTENT_LABEL = "Dropdown";
const isIOs = "ios" === devices.current().platform;
export const DROP_DOWN_EDITOR_DEPRECATED_OPTIONS = {
fieldTemplate: {
since: "25.2",
message: "Use the 'fieldAddons' option instead"
}
};
function createTemplateWrapperElement() {
return $("<div>").addClass(DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER)
}
class DropDownEditor extends TextBox {
_supportedKeys() {
return Object.assign({}, super._supportedKeys(), {
tab: e => {
var _this$_popup;
const {
opened: opened
} = this.option();
if (!opened) {
return
}
if (!(null !== (_this$_popup = this._popup) && void 0 !== _this$_popup && _this$_popup.getFocusableElements().length)) {
this.close();
return
}
const $focusableElement = e.shiftKey ? this._getLastPopupElement() : this._getFirstPopupElement();
if ($focusableElement) {
eventsEngine.trigger($focusableElement, "focus");
$focusableElement.select()
}
e.preventDefault()
},
escape: e => {
const {
opened: opened
} = this.option();
if (opened) {
e.preventDefault()
}
this.close();
return true
},
upArrow: e => {
if (!isCommandKeyPressed(e)) {
e.preventDefault();
e.stopPropagation();
if (e.altKey) {
this.close();
return false
}
}
return true
},
downArrow: e => {
if (!isCommandKeyPressed(e)) {
e.preventDefault();
e.stopPropagation();
if (e.altKey) {
this._validatedOpening();
return false
}
}
return true
},
enter: e => {
const {
opened: opened
} = this.option();
if (opened) {
e.preventDefault();
this._valueChangeEventHandler(e)
}
return true
}
})
}
_getDefaultButtons() {
return super._getDefaultButtons().concat([{
name: "dropDown",
Ctor: DropDownButton
}])
}
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
value: null,
onOpened: null,
onClosed: null,
opened: false,
acceptCustomValue: true,
applyValueMode: "instantly",
deferRendering: true,
activeStateEnabled: true,
dropDownButtonTemplate: "dropDownButton",
fieldTemplate: null,
fieldAddons: null,
openOnFieldClick: false,
showDropDownButton: true,
buttons: void 0,
dropDownOptions: {
showTitle: false
},
popupPosition: this._getDefaultPopupPosition(),
onPopupInitialized: null,
applyButtonText: messageLocalization.format("OK"),
cancelButtonText: messageLocalization.format("Cancel"),
buttonsLocation: "default",
useHiddenSubmitElement: false,
validationMessagePosition: "auto",
_cached_dropDownOptions: {}
})
}
_useTemplates() {
return true
}
_getDefaultPopupPosition(isRtlEnabled) {
const position = getDefaultAlignment(isRtlEnabled);
return {
offset: {
h: 0,
v: -1
},
my: `${position} top`,
at: `${position} bottom`,
collision: "flip flip"
}
}
_defaultOptionsRules() {
return super._defaultOptionsRules().concat([{
device(device) {
const isGeneric = "generic" === device.platform;
return isGeneric
},
options: {
popupPosition: {
offset: {
v: 0
}
}
}
}])
}
_inputWrapper() {
return this.$element().find(`.${DROP_DOWN_EDITOR_INPUT_WRAPPER}`).first()
}
_init() {
super._init();
this._initVisibilityActions();
this._initPopupInitializedAction();
const {
rtlEnabled: rtlEnabled,
dropDownOptions: dropDownOptions
} = this.option();
this._updatePopupPosition(rtlEnabled);
this._options.cache("dropDownOptions", dropDownOptions)
}
_updatePopupPosition(isRtlEnabled) {
const {
my: my,
at: at
} = this._getDefaultPopupPosition(isRtlEnabled);
const {
popupPosition: currentPosition
} = this.option();
this.option("popupPosition", extend({}, currentPosition, {
my: my,
at: at
}))
}
_initVisibilityActions() {
this._openAction = this._createActionByOption("onOpened", {
excludeValidators: ["disabled", "readOnly"]
});
this._closeAction = this._createActionByOption("onClosed", {
excludeValidators: ["disabled", "readOnly"]
})
}
_initPopupInitializedAction() {
this._popupInitializedAction = this._createActionByOption("onPopupInitialized", {
excludeValidators: ["disabled", "readOnly"]
})
}
_initMarkup() {
this._renderSubmitElement();
super._initMarkup();
this.$element().addClass("dx-dropdowneditor");
this.setAria("role", this._getAriaRole())
}
_render() {
this._detachFocusEvents();
super._render();
this._renderOpenHandler();
this._attachFocusOutHandler();
this._renderOpenedState()
}
_renderContentImpl() {
const {
deferRendering: deferRendering
} = this.option();
if (!deferRendering) {
this._createPopup()
}
}
_renderInput() {
super._renderInput();
this._renderTemplateWrapper();
this._renderFieldAddons();
this._wrapInput();
this._setDefaultAria()
}
_wrapInput() {
this._$container = this.$element().wrapInner($("<div>").addClass(DROP_DOWN_EDITOR_INPUT_WRAPPER)).children().eq(0)
}
_getAriaHasPopup() {
return "true"
}
_getAriaAutocomplete() {
return "none"
}
_getAriaRole() {
return "combobox"
}
_setDefaultAria() {
this.setAria({
haspopup: this._getAriaHasPopup(),
autocomplete: this._getAriaAutocomplete(),
role: this._getAriaRole()
})
}
_readOnlyPropValue() {
return !this._isEditable() || super._readOnlyPropValue()
}
_cleanFocusState() {
super._cleanFocusState();
const {
fieldTemplate: fieldTemplate
} = this.option();
if (fieldTemplate) {
this._detachFocusEvents()
}
}
_getFieldTemplate() {
const {
fieldTemplate: fieldTemplate
} = this.option();
if (!fieldTemplate) {
return
}
return this._getTemplate(fieldTemplate)
}
_renderMask() {
const {
fieldTemplate: fieldTemplate
} = this.option();
if (fieldTemplate) {
return
}
super._renderMask()
}
_renderField() {
const fieldAddonsTemplates = this._getFieldAddonsTemplates();
if (fieldAddonsTemplates) {
this._renderFieldAddonsContent(fieldAddonsTemplates);
return
}
const fieldTemplate = this._getFieldTemplate();
if (fieldTemplate) {
this._renderTemplatedField(fieldTemplate, this._fieldRenderData())
}
}
_renderPlaceholder() {
const hasFieldTemplate = !!this._getFieldTemplate();
if (!hasFieldTemplate) {
super._renderPlaceholder()
}
}
_renderValue() {
const {
useHiddenSubmitElement: useHiddenSubmitElement
} = this.option();
if (useHiddenSubmitElement) {
this._setSubmitValue()
}
const promise = super._renderValue();
return promise.always(this._renderField.bind(this))
}
_getButtonsContainer() {
const fieldTemplate = this._getFieldTemplate();
return fieldTemplate ? this._$container : this._$textEditorContainer
}
_renderBeforeFieldAddon() {
if (!this._$beforeFieldAddon && this._$textEditorContainer) {
this._$beforeFieldAddon = $("<div>").addClass(DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON).insertBefore(this._$textEditorContainer)
}
}
_renderAfterFieldAddon() {
if (!this._$afterFieldAddon && this._$textEditorContainer) {
this._$afterFieldAddon = $("<div>").addClass(DROP_DOWN_EDITOR_AFTER_FIELD_ADDON).insertAfter(this._$textEditorContainer)
}
}
_renderFieldAddons() {
const {
fieldAddons: fieldAddons
} = this.option();
if (!fieldAddons) {
return
}
this._renderBeforeFieldAddon();
this._renderAfterFieldAddon()
}
_renderTemplateWrapper() {
const fieldTemplate = this._getFieldTemplate();
if (!fieldTemplate) {
return
}
this._$templateWrapper ?? (this._$templateWrapper = createTemplateWrapperElement().prependTo(this.$element()))
}
_renderTemplatedField(fieldTemplate, data) {
var _this$_$textEditorCon, _this$_$templateWrapp;
const isFocused = focused(this._input());
this._detachKeyboardEvents();
this._detachFocusEvents();
null === (_this$_$textEditorCon = this._$textEditorContainer) || void 0 === _this$_$textEditorCon || _this$_$textEditorCon.remove();
const $newTemplateWrapper = createTemplateWrapperElement();
null === (_this$_$templateWrapp = this._$templateWrapper) || void 0 === _this$_$templateWrapp || _this$_$templateWrapp.replaceWith($newTemplateWrapper);
this._$templateWrapper = $newTemplateWrapper;
const currentRenderContext = Symbol("renderContext");
this._activeRenderContext = currentRenderContext;
fieldTemplate.render({
model: data,
container: getPublicElement(this._$templateWrapper),
onRendered: () => {
if (this._activeRenderContext !== currentRenderContext) {
return
}
const $input = this._input();
if (!$input.length) {
throw errors.Error("E1010")
}
this._integrateInput();
if (!isFocused) {
return
}
if (browser.mozilla) {
const inputElement = $input.get(0);
inputElement.focus({
preventScroll: true
})
} else {
eventsEngine.trigger($input, "focus")
}
}
})
}
_getFieldAddonsTemplates() {
const {
fieldAddons: fieldAddons
} = this.option();
if (!fieldAddons) {
return null
}
const {
beforeTemplate: before,
afterTemplate: after
} = fieldAddons;
const beforeTemplate = before ? this._getTemplate(before) : null;
const afterTemplate = after ? this._getTemplate(after) : null;
return {
beforeTemplate: beforeTemplate,
afterTemplate: afterTemplate
}
}
_clearFieldAddons(removeField) {
var _this$_$beforeFieldAd, _this$_$afterFieldAdd;
null === (_this$_$beforeFieldAd = this._$beforeFieldAddon) || void 0 === _this$_$beforeFieldAd || _this$_$beforeFieldAd.empty();
null === (_this$_$afterFieldAdd = this._$afterFieldAddon) || void 0 === _this$_$afterFieldAdd || _this$_$afterFieldAdd.empty();
if (removeField) {
this._$beforeFieldAddon = null;
this._$afterFieldAddon = null
}
}
_renderBeforeFieldAddonContent(beforeTemplate) {
if (beforeTemplate && this._$beforeFieldAddon) {
beforeTemplate.render({
model: this._fieldRenderData(),
container: getPublicElement(this._$beforeFieldAddon)
})
}
}
_renderAfterFieldAddonContent(afterTemplate) {
if (afterTemplate && this._$afterFieldAddon) {
afterTemplate.render({
model: this._fieldRenderData(),
container: getPublicElement(this._$afterFieldAddon)
})
}
}
_renderFieldAddonsContent(fieldAddonsTemplates) {
this._clearFieldAddons();
if (!fieldAddonsTemplates) {
return
}
const {
beforeTemplate: beforeTemplate,
afterTemplate: afterTemplate
} = fieldAddonsTemplates;
this._renderBeforeFieldAddonContent(beforeTemplate);
this._renderAfterFieldAddonContent(afterTemplate)
}
_integrateInput() {
const {
isValid: isValid
} = this.option();
this._renderFocusState();
this._refreshValueChangeEvent();
this._refreshEvents();
this._refreshEmptinessEvent();
this._setDefaultAria();
this._setFieldAria();
this._toggleValidationClasses(!isValid);
const {
_onMarkupRendered: markupRendered
} = this.option();
null === markupRendered || void 0 === markupRendered || markupRendered()
}
_refreshEmptinessEvent() {
eventsEngine.off(this._input(), "input blur", this._toggleEmptinessEventHandler);
this._renderEmptinessEvent()
}
_fieldRenderData() {
const {
value: value
} = this.option();
return value
}
_initTemplates() {
this._templateManager.addDefaultTemplates({
dropDownButton: new FunctionTemplate(options => {
const $icon = $("<div>").addClass("dx-dropdowneditor-icon");
$(options.container).append($icon)
})
});
super._initTemplates()
}
_renderOpenHandler() {
const $inputWrapper = this._inputWrapper();
const eventName = addNamespace(clickEventName, this.NAME);
const {
openOnFieldClick: openOnFieldClick
} = this.option();
eventsEngine.off($inputWrapper, eventName);
eventsEngine.on($inputWrapper, eventName, this._getInputClickHandler(openOnFieldClick));
this.$element().toggleClass(DROP_DOWN_EDITOR_FIELD_CLICKABLE, openOnFieldClick);
if (openOnFieldClick) {
this._openOnFieldClickAction = this._createAction(this._openHandler.bind(this))
}
}
_attachFocusOutHandler() {
if (isIOs) {
this._detachFocusOutEvents();
eventsEngine.on(this._inputWrapper(), addNamespace("focusout", this.NAME), event => {
const newTarget = event.relatedTarget;
const {
opened: opened
} = this.option();
if (newTarget && opened) {
const isNewTargetOutside = this._isTargetOutOfComponent(newTarget);
if (isNewTargetOutside) {
this.close()
}
}
})
}
}
_isTargetOutOfComponent(newTarget) {
const popupWrapper = this.content ? $(this.content()).closest(`.${DROP_DOWN_EDITOR_OVERLAY}`) : this._$popup;
const isTargetOutsidePopup = 0 === $(newTarget).closest(`.${DROP_DOWN_EDITOR_OVERLAY}`, popupWrapper).length;
return isTargetOutsidePopup
}
_detachFocusOutEvents() {
if (!isIOs) {
return
}
eventsEngine.off(this._inputWrapper(), addNamespace("focusout", this.NAME))
}
_getInputClickHandler(openOnFieldClick) {
return openOnFieldClick ? e => {
this._executeOpenAction(e)
} : () => {
this._focusInput()
}
}
_openHandler() {
this._toggleOpenState()
}
_executeOpenAction(e) {
var _this$_openOnFieldCli;
null === (_this$_openOnFieldCli = this._openOnFieldClickAction) || void 0 === _this$_openOnFieldCli || _this$_openOnFieldCli.call(this, {
event: e
})
}
_keyboardEventBindingTarget() {
return this._input()
}
_focusInput() {
const {
disabled: disabled,
focusStateEnabled: focusStateEnabled
} = this.option();
if (disabled) {
return false
}
if (focusStateEnabled && !focused(this._input())) {
this._resetCaretPosition();
eventsEngine.trigger(this._input(), "focus")
}
return true
}
_resetCaretPosition() {
let ignoreEditable = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : false;
const inputElement = this._input().get(0);
if (inputElement) {
const {
value: value
} = inputElement;
const caretPosition = isDefined(value) && (ignoreEditable || this._isEditable()) ? value.length : 0;
this._caret({
start: caretPosition,
end: caretPosition
}, true)
}
}
_isEditable() {
const {
acceptCustomValue: acceptCustomValue
} = this.option();
return acceptCustomValue
}
_toggleOpenState(isVisible) {
if (!this._focusInput()) {
return
}
const {
readOnly: readOnly,
opened: opened
} = this.option();
if (!readOnly) {
this.option("opened", isVisible ?? !opened)
}
}
_getControlsAria() {
return this._popup && this._popupContentId
}
_renderOpenedState() {
const {
opened: opened
} = this.option();
if (opened) {
this._createPopup()
}
this.$element().toggleClass(DROP_DOWN_EDITOR_ACTIVE, opened);
this._setPopupOption("visible", opened);
const arias = {
expanded: opened,
controls: this._getControlsAria()
};
this.setAria(arias);
this.setAria("owns", opened ? this._popupContentId : void 0, this.$element())
}
_createPopup() {
if (this._$popup) {
return
}
this._$popup = $("<div>").addClass(DROP_DOWN_EDITOR_OVERLAY).appendTo(this.$element());
this._renderPopup();
this._renderPopupContent();
this._setPopupAriaLabel()
}
_setPopupAriaLabel() {
var _this$_popup2;
const $overlayContent = null === (_this$_popup2 = this._popup) || void 0 === _this$_popup2 ? void 0 : _this$_popup2.$overlayContent();
this.setAria("label", "Dropdown", $overlayContent)
}
_renderPopupContent() {}
_renderPopup() {
const defaultOptions = this._popupConfig();
const cachedOptions = this._options.cache("dropDownOptions");
const popupConfig = extend(defaultOptions, cachedOptions);
this._popup = this._createComponent(this._$popup, Popup, popupConfig);
this._popup.on({
showing: this._popupShowingHandler.bind(this),
shown: this._popupShownHandler.bind(this),
hiding: this._popupHidingHandler.bind(this),
hidden: this._popupHiddenHandler.bind(this),
contentReady: this._contentReadyHandler.bind(this)
});
this._attachPopupKeyHandler();
this._contentReadyHandler();
this._setPopupContentId(this._popup.$content());
this._bindInnerWidgetOptions(this._popup, "dropDownOptions")
}
_attachPopupKeyHandler() {
var _this$_popup3;
eventsEngine.on(null === (_this$_popup3 = this._popup) || void 0 === _this$_popup3 ? void 0 : _this$_popup3.$overlayContent(), addNamespace("keydown", this.NAME), e => this._popupKeyHandler(e))
}
_popupKeyHandler(e) {
switch (normalizeKeyName(e)) {
case "tab":
this._popupTabHandler(e);
break;
case "escape":
this._popupEscHandler()
}
}
_popupTabHandler(e) {
const $target = $(e.target);
const moveBackward = e.shiftKey && $target.is(this._getFirstPopupElement());
const moveForward = !e.shiftKey && $target.is(this._getLastPopupElement());
if (moveForward || moveBackward) {
eventsEngine.trigger(this.field(), "focus");
e.preventDefault()
}
}
_popupEscHandler() {
eventsEngine.trigger(this._input(), "focus");
this.close()
}
_setPopupContentId($popupContent) {
this._popupContentId = `dx-${new Guid}`;
this.setAria("id", this._popupContentId, $popupContent)
}
_contentReadyHandler() {}
_popupConfig() {
const {
popupPosition: popupPosition,
dropDownOptions: dropDownOptions
} = this.option();
const config = {
onInitialized: this._getPopupInitializedHandler(),
position: extend(popupPosition, {
of: this.$element()
}),
showTitle: null === dropDownOptions || void 0 === dropDownOptions ? void 0 : dropDownOptions.showTitle,
width: getElementWidth(this.$element()),
height: "auto",
shading: false,
hideOnParentScroll: true,
hideOnOutsideClick: e => this._closeOutsideDropDownHandler(e),
animation: {
show: {
type: "fade",
duration: 0,
from: 0,
to: 1
},
hide: {
type: "fade",
duration: 400,
from: 1,
to: 0
}
},
deferRendering: false,
focusStateEnabled: false,
showCloseButton: false,
dragEnabled: false,
toolbarItems: this._getPopupToolbarItems(),
onPositioned: this._popupPositionedHandler.bind(this),
fullScreen: false,
contentTemplate: null,
_hideOnParentScrollTarget: this.$element(),
_wrapperClassExternal: DROP_DOWN_EDITOR_OVERLAY,
_ignorePreventScrollEventsDeprecation: true
};
return config
}
_popupInitializedHandler() {}
_getPopupInitializedHandler() {
const {
onPopupInitialized: onPopupInitialized
} = this.option();
return e => {
this._popupInitializedHandler();
if (onPopupInitialized) {
this._popupInitializedAction({
popup: e.component
})
}
}
}
_dimensionChanged() {
if (hasWindow() && !this.$element().is(":visible")) {
this.close();
return
}
this._updatePopupWidth()
}
_updatePopupWidth() {
var _this$_options$cache;
const width = null === (_this$_options$cache = this._options.cache("dropDownOptions")) || void 0 === _this$_options$cache ? void 0 : _this$_options$cache.width;
if (void 0 === width) {
this._setPopupOption("width", getElementWidth(this.$element()))
}
}
_popupPositionedHandler(e) {
var _e$position;
const {
labelMode: labelMode,
stylingMode: stylingMode
} = this.option();
if (!this._popup) {
return
}
const $popupOverlayContent = this._popup.$overlayContent();
const isOverlayFlipped = null === (_e$position = e.position) || void 0 === _e$position || null === (_e$position = _e$position.v) || void 0 === _e$position ? void 0 : _e$position.flip;
const shouldIndentForLabel = "hidden" !== labelMode && "outside" !== labelMode && "outlined" === stylingMode;
if (e.position) {
$popupOverlayContent.toggleClass(DROP_DOWN_EDITOR_OVERLAY_FLIPPED, isOverlayFlipped)
}
if (isOverlayFlipped && shouldIndentForLabel && this._label.isVisible()) {
const $label = this._label.$element();
move($popupOverlayContent, {
top: locate($popupOverlayContent).top - parseInt($label.css("fontSize") ?? "0", 10)
})
}
}
_popupShowingHandler() {}
_popupHidingHandler() {
this.option("opened", false)
}
_popupShownHandler() {
var _this$_validationMess;
this._openAction();
null === (_this$_validationMess = this._validationMessage) || void 0 === _this$_validationMess || _this$_validationMess.option("positionSide", this._getValidationMessagePositionSide())
}
_popupHiddenHandler() {
var _this$_validationMess2;
this._closeAction();
null === (_this$_validationMess2 = this._validationMessage) || void 0 === _this$_validationMess2 || _this$_validationMess2.option("positionSide", this._getValidationMessagePositionSide())
}
_getValidationMessagePositionSide() {
var _this$_popup4;
const {
validationMessagePosition: validationMessagePosition
} = this.option();
if (validationMessagePosition && "auto" !== validationMessagePosition) {
return validationMessagePosition
}
let positionSide = "bottom";
if (null !== (_this$_popup4 = this._popup) && void 0 !== _this$_popup4 && _this$_popup4.option("visible")) {
const {
top: myTop
} = animationPosition.setup(this.$element());
const {
top: popupTop
} = animationPosition.setup(this._popup.$content());
const {
popupPosition: popupPosition
} = this.option();
positionSide = myTop + popupPosition.offset.v > popupTop ? "bottom" : "top"
}
return positionSide
}
_closeOutsideDropDownHandler(event) {
const {
target: target
} = event;
const $target = $(target);
const dropDownButton = this.getButton("dropDown");
const $dropDownButton = null === dropDownButton || void 0 === dropDownButton ? void 0 : dropDownButton.$element();
const isInputClicked = Boolean($target.closest(this.$element()).length);
const isDropDownButtonClicked = Boolean($target.closest($dropDownButton).length);
const isOutsideClick = !isInputClicked && !isDropDownButtonClicked;
return isOutsideClick
}
_clean() {
var _this$_$popup;
this._clearFieldAddons(true);
null === (_this$_$popup = this._$popup) || void 0 === _this$_$popup || _this$_$popup.remove();
this._openOnFieldClickAction = void 0;
this._$templateWrapper = void 0;
this._popup = void 0;
this._$popup = void 0;
super._clean()
}
_setPopupOption() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key]
}
this._setWidgetOption("_popup", args)
}
_validatedOpening() {
const {
readOnly: readOnly
} = this.option();
if (!readOnly) {
this._toggleOpenState(true)
}
}
_getPopupToolbarItems() {
const {
applyValueMode: applyValueMode
} = this.option();
return "useButtons" === applyValueMode ? this._popupToolbarItemsConfig() : []
}
_getFirstPopupElement() {
var _this$_popup5;
return $(null === (_this$_popup5 = this._popup) || void 0 === _this$_popup5 ? void 0 : _this$_popup5.getFocusableElements()).first()
}
_getLastPopupElement() {
var _this$_popup6;
return $(null === (_this$_popup6 = this._popup) || void 0 === _this$_popup6 ? void 0 : _this$_popup6.getFocusableElements()).last()
}
_popupToolbarItemsConfig() {
const {
applyButtonText: applyButtonText,
cancelButtonText: cancelButtonText
} = this.option();
const buttonsConfig = [{
shortcut: "done",
options: {
onClick: this._applyButtonHandler.bind(this),
text: applyButtonText
}
}, {
shortcut: "cancel",
options: {
onClick: this._cancelButtonHandler.bind(this),
text: cancelButtonText
}
}];
return this._applyButtonsLocation(buttonsConfig)
}
_applyButtonsLocation(buttonsConfig) {
const {
buttonsLocation: buttonsLocation
} = this.option();
const resultConfig = buttonsConfig;
if ("default" !== buttonsLocation) {
const position = splitPair(buttonsLocation);
resultConfig.forEach(element => {
extend(element, {
toolbar: position[0],
location: position[1]
})
})
}
return resultConfig
}
_applyButtonHandler(e) {
this.close();
const {
focusStateEnabled: focusStateEnabled
} = this.option();
if (focusStateEnabled) {
this.focus()
}
}
_cancelButtonHandler() {
this.close();
const {
focusStateEnabled: focusStateEnabled
} = this.option();
if (focusStateEnabled) {
this.focus()
}
}
_popupOptionChanged(args) {
const options = Widget.getOptionsFromContainer(args);
this._setPopupOption(options);
const optionsKeys = Object.keys(options);
if (optionsKeys.includes("width") || optionsKeys.includes("height")) {
this._dimensionChanged()
}
}
_renderSubmitElement() {
const {
useHiddenSubmitElement: useHiddenSubmitElement
} = this.option();
if (useHiddenSubmitElement) {
this._$submitElement = $("<input>").attr("type", "hidden").appendTo(this.$element())
}
}
_setSubmitValue() {
const {
value: value
} = this.option();
this._getSubmitElement().val(value)
}
_getSubmitElement() {
const {
useHiddenSubmitElement: useHiddenSubmitElement
} = this.option();
if (useHiddenSubmitElement) {
return this._$submitElement
}
return super._getSubmitElement()
}
_shouldLogFieldTemplateDeprecationWarning() {
return false
}
_setDeprecatedOptions() {
super._setDeprecatedOptions();
if (this._shouldLogFieldTemplateDeprecationWarning()) {
extend(this._deprecatedOptions, DROP_DOWN_EDITOR_DEPRECATED_OPTIONS)
}
}
_dispose() {
this._detachFocusOutEvents();
super._dispose()
}
_optionChanged(args) {
var _this$_popup7;
const {
name: name,
value: value
} = args;
switch (name) {
case "width":
case "height":
super._optionChanged(args);
this._updatePopupWidth();
null === (_this$_popup7 = this._popup) || void 0 === _this$_popup7 || _this$_popup7.repaint();
break;
case "opened":
this._renderOpenedState();
break;
case "onOpened":
case "onClosed":
this._initVisibilityActions();
break;
case "onPopupInitialized":
this._initPopupInitializedAction();
break;
case "fieldAddons":
case "fieldTemplate":
case "acceptCustomValue":
case "openOnFieldClick":
this._invalidate();
break;
case "dropDownButtonTemplate":
case "showDropDownButton":
this._updateButtons(["dropDown"]);
break;
case "dropDownOptions":
this._popupOptionChanged(args);
this._innerWidgetOptionChanged(this._popup, args);
break;
case "_cached_dropDownOptions":
case "popupPosition":
break;
case "deferRendering":
if (hasWindow()) {
this._createPopup()
}
break;
case "applyValueMode":
case "applyButtonText":
case "cancelButtonText":
case "buttonsLocation":
this._setPopupOption("toolbarItems", this._getPopupToolbarItems());
break;
case "useHiddenSubmitElement":
if (this._$submitElement) {
this._$submitElement.remove();
this._$submitElement = void 0
}
this._renderSubmitElement();
break;
case "rtlEnabled":
this._updatePopupPosition(value);
super._optionChanged(args);
break;
default:
super._optionChanged(args)
}
}
open() {
this.option("opened", true)
}
close() {
this.option("opened", false)
}
field() {
return getPublicElement(this._input())
}
content() {
return this._popup ? this._popup.content() : null
}
}
registerComponent("dxDropDownEditor", DropDownEditor);
export default DropDownEditor;