Ticket T1252612

Visible to All Users

How to make dxTagBox stay opened when selecting items

Jeppe Nielsen

created 7 months ago

Hi Devextreme,

I am using your dxTagBox for performing multi select.

However there is a behaviour I am trying to implement that seems to deviate from normal usage, unless I have overseen something.

I would like the user to:

Select and item.
Let the tagbox stay open and immidiately display the selected items in the editor.
When the user clicks outside the tag box it just closes and the selected values remains displayed.

Behaviour wise similar to the multi select from Porsche's design system, see https://designsystem.porsche.com/v3/components/multi-select/examples.

Here you can see values are immidiately added to the editors display and when the multi select closes the changes made remains.

I know that you have two modes in applyValueMode

Using instant immidiately closes the dropdown and this i what I am trying to avoid.

Using the useButtons keeps the dropdown open and also displays two buttons to confirm/cancel. This is fairly close to what I am trying to acheive with the difference being that 1) It does not change the values on the fly as the user selects/unselects items and 2) It needs button confirmations.

I hope my question is somewhat clear of what I am trying to acheive :)

Thanks,
Jeppe

Answers approved by DevExpress Support

Paul Donato (DevExpress Support)

created 7 months ago

Hi,

Thank you for the description.

Currently, TagBox does not offer a built-in solution for this behavior. However, you can consider the following workaround:

Continue using applyValueMode set to 'instantly'.
To prevent the dropdown from closing by default, define a custom itemTemplate and implement the desired click logic within it, including stopPropagation. This will override the default click behavior.

For reference, you can view a simple demo that I created: Demo Link.

Please let me know if this helps.

Show previous comments (2)

Jeppe Nielsen 7 months ago

Hi Paul,

Thanks for the quick answer and demo sample.

The behavior in the demo provided is what I was looking for :)

Thanks,
Jeppe

Jeppe Nielsen 3 months ago

Hi Paul,

It's some time ago - but we implemented a solution based on your provided sample and it works great.

However there is one small case we recently discovered that im currently looking into.

If you hit the 'enter' key for selecting elements it still instantly closes.

I have tried several things but cant solve it. E.g. tried something like this:

TypeScript
const dxInstance = this.dxInstance()?.instance;
if (dxInstance) {
    dxInstance.off("onKeyPress");
    dxInstance.off("keyDown");
    dxInstance.off("enterKey");
    dxInstance.off("onKeyDown");
    dxInstance.off("onKeyUp");
}

also tried on the input itself:

TypeScript
const textEditorInput = this.renderer.selectRootElement(".dx-texteditor-input", true);
if (textEditorInput) {
    console.log("textEditorInput", textEditorInput);
    textEditorInput.removeEventListener("keypress", () => EMPTY);
    textEditorInput.removeEventListener("keydown", () => EMPTY);
    textEditorInput.removeEventListener("enterkey", () => EMPTY);
    textEditorInput.removeEventListener("keydown", () => EMPTY);
    textEditorInput.removeEventListener("keyup", () => EMPTY);
}

I tried listening on the onEnterKey and call stopPropagation().

And other crazy hacks but cant seem to find any solution :D

So my question: Do you have suggestions on how I can prevent the tag-box from closing when an item is selected by hitting the enter key?

Best regards,
Jeppe

Paul Donato (DevExpress Support) 3 months ago

Hi,

Thank you for the update.

Upon further checking, you can skip the workarounds and instead enable the showSelectionControls for your usage scenario.

Please accept my apologies for overlooking this solution earlier.
See the following example: CodeSandBox

Let me know if this helps or if you have further questions.

Jeppe Nielsen 3 months ago

Hi Paul,

It's fine - it's a much simpler solution :D

So far everything seems to be working as I would like, thanks.

Paul Donato (DevExpress Support) 3 months ago

Hi,

Thank you for the update.

I'm happy to hear that the alternative solution works well for you. If you need further assistance, feel free to contact us.

Created: September 10, 2024 6:07 AM

Modified: January 28, 2025 6:14 AM

Platform: Angular

Product: DevExtreme Editors & Validation

Build: 24.1.4

Operating System: Windows 11

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

How to make dxTagBox stay opened when selecting items

Answers approved by DevExpress Support

Recently viewed tickets