Can't validate Chips on mobile devices

[Dahkon]

Hello,

I can't seems to validate chips entries on mobile devices. At least on Android but maybe's the same on ios. The problem occurs when there is another field following chips, so it's working fine on http://next.materializecss.com/.

Here is a codepen : https://codepen.io/anon/pen/bLXpGJ

Just open it on Android Chrome and try to enter a chip, instead of an enter key there is a tab key on the keyboard so it jump to the next field instead of validating the chip.

There was no problem with 0.100.2

Tested on Nexus 5, Android 6, Chrome last version.

[Dahkon]

After some digging, it seems to occurs when chips are within the same FORM tag as others input fields. That's really annoying as I must have chips in the middle of a form. Any ideas ?

[acburst]

Hmm, after some testing it seems like a problem with Android's keyboard. When focused on an input within a Form the enter key is turned into a Tab key if there are following inputs. The weird part about this Tab is that it doesn't seem to fire any Keyboard events (keypress, keydown, keyup) so there is no way to handle it.

A not so ideal solution is to add tabindex="-1" to all the other inputs in the same form as your chips to prevent being able to tab to them which brings back the enter key. Not really sure on what could fix this problem.

[Dahkon]

Thanks for your reply. That's indeed not an ideal solution.

Would you consider something that can be usefull for desktop users too, an alternative solution to validate entries on chips ? I had to add an helper text in order for my users to understand how to enter chips, as it is, it's not easily understandable by common (not geek like us) users.

I suggest a button like this :

That would solve android problem too.

[Dahkon]

My solution until it's fixed correctly, if it can help someone. Working fine on desktop & android

//Javascript / jquery
//Call this function after chips initialization

function chips() {
$('.chips').each(function() {
                var that=this;
                $(this).find('input').after('<a href="#" class="add circle grey lighten-2 center-align"><i class="material-icons tiny">add</i></a>');
                $(this).on('click', 'a.add', function(e) {
                    e.preventDefault();
                    var input=$(e.currentTarget).prev('input');
                    $(that).chips('addChip', {
                        tag: input.val()
                    }); 
                    input.val('');
                });
            });
}

//css
.chips a.add {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  opacity: 0;
  text-align: center;
  transition: opacity 0.3s ease-out;
  vertical-align: middle;
  width: 32px; }
  .chips a.add i {
    line-height: 32px; }
  .chips a.add:hover {
    opacity: 1 !important; }
.chips.focus a.add {
  opacity: 0.6; }

[matyaspeto]

I just created this quickly. Basically if user press spacebar, I trigger another keydown event which will be handled by chips input. You can also check for comma as a delimiter like if (e.data === ","){} Works on desktop and mobile.

document.querySelector('#transaction_transactionTagsStr').addEventListener('textInput', function(e){
    var keyCode = e.data.charCodeAt(0);
    if (keyCode == 32){
        e.preventDefault();
        e.currentTarget.dispatchEvent(new KeyboardEvent('keydown',{'keyCode':13}));
    }
});

[ermarkar]

I just created this quickly. Basically if user press spacebar, I trigger another keydown event which will be handled by chips input. You can also check for comma as a delimiter like if (e.data === ","){} Works on desktop and mobile.

document.querySelector('#transaction_transactionTagsStr').addEventListener('textInput', function(e){
    var keyCode = e.data.charCodeAt(0);
    if (keyCode == 32){
        e.preventDefault();
        e.currentTarget.dispatchEvent(new KeyboardEvent('keydown',{'keyCode':13}));
    }
});

Tried this but it is showing

Argument of type '{ keyCode: number; }' is not assignable to parameter of type 'KeyboardEventInit'.
  Object literal may only specify known properties, and 'keyCode' does not exist in type 'KeyboardEventInit'.

https://stackoverflow.com/questions/55481066/keyboard-event-not-dispatching-enter-key-event-in-angular

[Ri-Dearg]

I'm just started building a site for a course project using materialize CSS and now I've just discovered this problem. Has anyone figured out how to definitively make the keystroke a space? I think that would be most natural for users. It's been two years and for a core feature I would think that it should be working for a responsive css.

Edit: The codes for me above didn't work, even on android. I spent time changing materialize.js and found that you can change the chip entry key in the Chips section to spacebar with keyCode 32, but it still doesn't work on android! Even with Android keycodes. I think if this needs to be called a "responsive CSS" all its components should work on mobiles. Not having a full component functional is a fairly glaring issue.

In any case, Chips doesn't actually submit anything in forms directly, it stores everything in a data array... Not as documentation states though, each chip is stored in a separate dictionary within an array like: [{"tag": }].

So the trick? Place the Chip field outside the form. A submit button can be placed anywhere and just connected to the form with ID, so if you put it outside the form, before the submit button, it looks like it is still part of the form but android will default to hitting an enter key instead of tab, allowing entry of the chip data.

Finally, Retrieve the tag data from the array , and append each tag in a hidden input field on form submit, and just format the data as you need around that.

Really two years on and such a glaring issue hasn't been fixed. Sorry to say, I wIll not be using Materialize again...

[lordplagus02]

Yea don't use this framework. It is no longer maintained and really quite broken.

[juanmanuelvillacis]

I found a way when the spacebar is pressed. then it reads the input value of the chip alement and add it to the same chip with the addChip method Works fine for me! document.getElementById("chips").addEventListener("keydown",function(e){ if (e.key == ' '){ var elem = e.currentTarget; const inputField = elem.querySelector('input'); instance = M.Chips.getInstance(elem); instance.addChip({tag: inputField.value}); inputField.value = ''; } });