yairEO/tagify

Always show dropdown

Mushr0000m opened this issue · 14 comments

Mushr0000m commented

I have set in the option dropdown.enabled: 0 so it always show the dropdown for the user even without typing anything. The problem is that if the user uses the keyword to select a value from the dropdown and enter enter on the keyboard the tag is added and the dropdown closes. The focus is still on the input and there is no way to open the dropdown, the user have to blur and click again on the input.

This issue doesn't happen if the user select a value from the dropdown with the mouse, only with the keyboard.

Thanks

yairEO commented

Thanks for reporting, I will look into this

yairEO commented

What do you mean "always show"? even if there's no focus on the Tagify component?
always show the suggestions no matter what? it might be visible over other elements.

Setting dropdown.enabled: 0 means show the suggestions dropdown on focus. it's not "always" shown..

Mushr0000m commented

You're right I mean always open when the input have focus. On blur it must close. But when using the keyboard to select elements from the dropdown, the input keep the focus but the dropdown close when selecting an item and doesn't reopen, even if the input have focus.

I saw you made changes, is it a fix for this situation ?

yairEO commented
Mushr0000m commented

I tried it and you fixed it for the enter key 👍

If I may ask one more thing, It would be nice to have the same behavior with other keyboard keys that select the tag, like tab and right arrow 😉

  • 👍2
yairEO commented

Sure, I'll look into it

Mushr0000m commented

I talk too quickly, I think there is a bug. When focusing the input, I start typing a letter and the input loses focus so I can't type other letter in the input.

yairEO commented

I will check in 8 hours when I get home.

Although I don't see any bad behavior in the demo page

Mushr0000m commented

Hi, You are right I tried it and the issue is when having a combination of dropdown.enabled: 0 AND enforceWhitelist: true.

In your demo page, change for the first input the conf to this, and you'll see the bug :

var input = document.querySelector('input[name=tags]'),
    // init Tagify script on the above inputs
    tagify = new Tagify(input, {
        dropdown: {
            enabled: 0,
        },
        enforceWhitelist: true,
        whitelist : ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ – ISO/IEC 14882", "C# – ISO/IEC 23270", "C/AL", "Caché ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "Céu", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL – ISO/IEC 1989", "CobolScript – COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp – Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL – deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"],
        blacklist : [".NET", "PHP"], // <-- passed as an attribute in this demo
    });
Mushr0000m commented

Did you had a chance to check this with the options described in my last post ?

yairEO commented

No not yet, I was very busy lately, I will test this very soon

Mushr0000m commented

Sorry to bother you again but did you look at it

yairEO commented

I am working on it, it's not that simple.

Mushr0000m commented

The update fixed it, thanks a lot !