md-chips with md-autocomplete inside don't clear initial spaces characters

[HiltonWS]

Actual behavior:

• What is the issue? md-chips with md-autocomplete inside don't clear initial spaces characters
• What is the expected behavior? Clear typed spaces characters when input is blank

Steps to reproduce the issue:

• https://material.angularjs.org/latest/demo/chips
  

Angular Versions:

• Angular Version: 1.5.5
• Angular Material Version: 1.1.0-rc4

Additional Information:

• Browser Type: Chrome
• Browser Version: 51.0.2704.84 (64-bit)
• OS: Linux 3.16.0-73-generic 95~14.04.1-Ubuntu SMP

[devversion]

I originally fixed that for the default chips in 2d020e1, but it seems like we didn't notice the same issue on the autocomplete.

[devversion]

@robertmesserle The correct fix would be to disable ngTrim on the autocompletes input element, but I guess some developers are insisting on ngTrim enabled.

I thought about disabling ngTrimautomatically in the chips component, as soon as the autocomplete is available - But that didn't work, because ngTrim is an attribute, which will be only read once at postLink.

I also thought about adding a ngModel parser / formatter to overwrite the trimmed value, but that didn't work either.

Any suggestions / ideas? (Probably setting ngTrim to disabled by default)

@crisbeto Maybe you have an idea as well.

[crisbeto]

I believe that ngTrim only trims the model value, but not the text in the input. Isn't the issue here that the input value isn't being trimmed?

In that case we could do something like this:

function getValue(value) {
  return value ? value.trim() : value;
}

ctrl.$formatters.unshift(getValue);
ctrl.$parsers.unshift(getValue);

@devversion my guess as to why the parser/formatter didn't work for you is that it should be applied to the inner input that has ng-model="$mdAutocompleteCtrl.scope.searchText", not the autocomplete's ng-model

[devversion]

Yeah, it only trims the ngModel of the input element.

In the chips component, we are loading the input value / chipBuffer from the ngModel.
(We don't want to use the input.val() way).. but the ngModel value is always trimmed.

Yes, I had the exact same approach, but it didn't work, because the formatters, parsers won't be triggered, when a user enters a space.

Not sure, where ngTrim is affecting that.

About your guess, It will be definitely applied to the autocompletes input.

Edit: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L1131-L1153

[crisbeto]

I had a similar issue with the parsers not firing for spaces, when I was working on the textarea. I ended up binding an input event instead, although I'm not sure that it's appropriate in this case.

Another option could be setting the updateOn via ngModelOptions to something like default keydown so (hopefully) ngModel fires for all keystrokes.

[devversion]

I just had a discussion with @robertmesserle.

Rob suggested, that we check the cursor position on backspace for the chips, instead of checking the inputs value.

By checking the cursor position, we will not have to modify the ngModel / trimming on the autocomplete component and it would run independently with the standalone version of the autocomplete. (Weird sounding here)

This would also improve the UX, because if you move your cursor to the start of the input and you press backspace, it should focus the previous chip.

Once the cursor selection will be to hacky, we will probably fallback to the input.val() approach.

Thanks again.