Topic: mdb-auto-completer vs mdb-autocomplete

itay pro asked 5 years ago


The implementation of mdb-autocomplete is straight forward, just one component with several attributes such as formControlName, label, datasource, minSearchLength, openOnFocus, textNoResults, textSearching, clearButtonTabIndex

According to https://mdbootstrap.com/docs/angular/forms/autocomplete/, now I see that for I also need to add an and loop. Plus, I need to implement code behide.

I have many such components and was quite satisfied with the previous method, but since it is due to be deprecated, I need to recode and recheck.

Are there migration guidelines ? Are all the previous options implemented ? Is there a default implementation that requires less modifications ? Basically, it looks like I need to code the previous build in implementation myself, and for every instance of the compoent.

Itay


itay pro answered 5 years ago


8 - Scrolling to an option using the arrow keys and selecting with the Enter key submits the form

Fixed in 7.5.2 (and probably even before)

Thanks


itay pro answered 5 years ago


Hi Damian,

I emailed you a demo in which you can find that:

5 - The "search" label in the autocompleter is overwritten with the selected option

8 - Scrolling to an option using the arrow keys and selecting with the Enter key submits the form

9.5 - Adding [clearButtonTabIndex]="-1" throws an error:

Can't bind to 'clearButtonTabIndex' since it isn't a known property of 'input'. ("

Thanks, Itay


Arkadiusz Idzikowski staff commented 5 years ago

You need to add [clearButtonTabIndex] to the mdb-auto-completer component. We will take a closer look at the rest of the problems, thank you for the demo.


itay pro commented 5 years ago

As mentioned:

Adding [clearButtonTabIndex]="-1" throws an error:

Can't bind to 'clearButtonTabIndex' since it isn't a known property of 'input'. ("

Did you do it on my code and it work ?

Thanks, Itay


Arkadiusz Idzikowski staff commented 5 years ago

This input works correctly in your app, but you need to add it to mdb-auto-completer component, not to the input element with mdbAutoCompleter directive.

To resolve problem with label, add mdbInput directive to the input element.

The problem with keyboard navigation and form submitting will be resolved in next version.


itay pro commented 5 years ago

Works ! Waiting for next ver


Damian Gemza staff answered 5 years ago


Dear mdb2,

8) I was not able to reproduce it. Please show me the .html and .ts code for this example.

I would prefer selecting the option using the Tab key, rather than the Enter key. - I don't think that Tab key is better than Enter. Tab is used to change focus, while Enter is used to approve some action.

"Auto Completer - added functionality to pick highlighted (with keyboard) item as input's value". Please explain - This functionality set the highlighted (with keyboard navigation) item as mdb-auto-completer input value.

9.5) I have added a [clearButtonTabIndex]="-1" to the mdb-auto-completer element, and the clear button is not focusable (with tab or shift-tab).

11) Please note, that mdb-auto-completer is not an equal port of mdb-autocompleter, but a brand new component. So there are no missing elements because we have not implemented a few options. You've got (select) event which is fired after highlighting elements in a dropdown.


itay pro answered 5 years ago


Follow up on open issues:

4 Fixed in 7.4.3

5 - mdb-autocomplete had a label directive and mdbtooltip. In mdb-auto-completer it is missing. However, I just realized that I can add an additional label element after the input element with mdbtooltip. However it collide with the input place holder so I remove the input place holder but then the label collides with the selected option so I added the class="active" for the label but no it appears only on top and not in the input field as other inputs do. So, please take a look on adding a label element after the input

+8. When selecting from the dropdown list using the Enter key in a form, the submit button is unintentionally triggered.

There is nothing special to reproduce. Placing an mdb-auto-completer inside a form, submits it when selecting an option with the Enter key

I would prefer selecting the option using the Tab key, rather than the Enter key. In the release notes of 7.4.3 you say: "Auto Completer - added functionality to pick highlighted (with keyboard) item as input's value". Please explain

+9.5 Clear button is a tab stop when going back (alt-tab) even with [clearButtonTabIndex]="-1" Still exists. try entering some content to the input, then go to next element and return with shift-tag. You will stop on the clear button of the input element

+11 onSelect() - an event when an item is selected from the dropdown is missing.

There is the new (select) option to mdb-auto-completer yet it is fired when option is highlighted (e.g. on every down arrow) but not when value is finally selected either using mouse button, Enter key or Tab Key


Damian Gemza staff answered 5 years ago


Please show me the code which causes you those problems. I wasn't able to reproduce it.


itay pro answered 5 years ago


Ping 8 When selecting from the dropdown list using the Enter key in a form, the submit button is unintentionally triggered


Damian Gemza staff answered 5 years ago


9.5) Tried to reproduce it, but without success: I have added the [clearButtonTabIndex]="-1" to the mdb-auto-completer component, and the clear button is not able to be focused (proper behavior).


Damian Gemza staff answered 5 years ago


2) We'll add the (select) event which will emit the currently selected option. This will be available with the next release of MDB Angular.

9.5) Please describe the tab stop - what is it?


itay pro commented 5 years ago

The Tab stop is the clear button of the input element


itay pro answered 5 years ago


2- I am looking for an event that will trigger whenever the selected highlighted option is changed

5 - mdb-autocomplete had a label directive and mdbtooltip. In mdb-auto-completer it is missing. However, I just realized that I can add an additional label element after the input element with mdbtooltip. However it collide with the input place holder so I remove the input place holder but then the label collides with the selected option so I added the class="active" for the label but no it appears only on top and not in the input field as other inputs do. So, please take a look on adding a label element after the input

+9.5 Clear button is a tab stop when going back (alt-tab) even with [clearButtonTabIndex]="-1"


Damian Gemza staff answered 5 years ago


1) Okay, it's broken on Chrome. We'll fix it.

2) Selected (highlighted)? Or Clicked (picked in the input)? There's no such event. Please specify about which selection you're talking about, and we'll implement such event.

5) I'm sorry, but still I don't understand you. Could you please describe it one more time, more clearly? What is tab-stop, and why you want there to use the tooltip? And on which element?

8) As I said before, We'll take a look at this.

Best Regards,

Damian


itay pro answered 5 years ago


Thanks, 1. Sorry, doesn't work. the list doesn't scroll. Angular Pro Ver 7.4.0 latest chrome. Mouse wheel does scroll 6. Because there is nothing to show

Waiting for the rest...


Damian Gemza staff answered 5 years ago


Here you can find some information about a few problems which you have pointed me out. I'll answer the missing ones tomorrow.

1) I don't think, that this mechanism is broken. I have tested it on Firefox - used a Remote Autocompleter example. When the items list is visible, I'm able to navigate through arrow up / arrow down key.

Also, the arrow up / down keys are moving the visible part of the list to them, so always I'm seeing the visible item. If your behavior is different, please provide me with the reproduction steps and also please specify which OS and Browser make problems.

3) We won't add textSearching input, because users have to set this feature on its own.

Every method to filter completer data is provided by our users, so you have to implement such a feature on your end

Here's the very simple example of how to use the textNoResults input to indicate if the autocompleter is searching data, or there are no data to view:

getFilteredData() {
    const textSearchingBox = document.querySelector('.completer-no-results');
    if (textSearchingBox) {
      textSearchingBox.textContent = 'Searching';
    }
    setTimeout(() => {
      this.results = this.searchEntries(this.searchText);
      if (textSearchingBox) {
        this.renderer.setStyle(textSearchingBox, 'visibility', 'hidden');
        textSearchingBox.textContent = 'No results found';
      }
    }, 1000);
  }

4) I don't know, where the problem is on your side. Just 'open' the autocompleter drodpown, and use the arrow up / down key to change the selected (highlighted) item.

But remember, that this feature is available only with MDB Angular.

In the live preview in our docs, there won't be such a feature.

6) Why do you want to set the textNoResults to empty string?

Do you want to turn off this box? If you want to hide the textNoResults box, please use the Renderer2 with setStyle method to hide it (we'll add appropriate input to hide this box).


itay pro answered 5 years ago


Thanks,

  1. The arrow keys move the highlighted element but the if the list is long it is not scrolled to show lower items
  2. Is there an event to hook with selected text ?
  3. You said so months ago
  4. How ? It is not in the docs
  5. mdb tooltip adds a tool tip to the label, relates to 7 9.5 Please check what I wrote, I edited the comment to make it clearer
  6. textNoResults="" doesn't work
  7. OK
  8. It can be done with mdb select

Damian Gemza staff answered 5 years ago


Dear mdb2,

1) This example shows how to fetch data from remote api initially. If you want to fetch the data after keyup, use the @HostListener class and bind the fetch data to this.data variable.

2) We'll think about this.

3) We'll think about this.

4) The scrolling down / up with the Arrow Up / Arrow Down key is working with the Angular code. It's not work on the live preview, because jQuery haven't got such functionality.

5) We'll think about this.

6) There's no such possibility. We'll think about implementing this in the future.

7) Yes, use the floating label in addition to the placeholder.

8) We'll check this.

9) I don't understand this. What with mdbTooltip with completer?

10) textNoResults is working fine. I have checked it.

11) We'll check this.

12) The value input is used to set the value of the input element. This is necessary to use.

13) You can't disable te specific option.

Best Regards,

Damian


itay pro answered 5 years ago


Hi,

After playing with the new component I have some questions:

  1. The remote example is not complete as it shows how to fetch entire data at start but not while typing
  2. I think that in the reactive example, (ngModelChange) should not be used
  3. [textSearching] is missing
  4. Cannot scroll using up/down arrow keys. Try it yourself in https://mdbootstrap.com/docs/angular/forms/autocomplete/#basic-example
  5. Using the arrow keys doesn’t change the selected text in the input element as did before
  6. How can I control the height of the drop down list or the number of displayed elements ?
  7. How can I add a label to appear above the input when there is text there ? Should I use a label in addition to the placeholder ?
  8. When selecting from the dropdown list using the Enter key in a form, the submit button is unintentionally triggered

itay pro commented 5 years ago

+9. What about mdbTooltip ? +9.5 Clear button is a tab stop when going back (alt-tab) even with [clearButtonTabIndex]="-1"


itay pro commented 5 years ago

+10. textNoResults="" doesn't change the message


itay pro commented 5 years ago

+11 onSelect() - an event when an item is selected from the dropdown is missing


itay pro commented 5 years ago

+12. Option component value [value]="value"What does it mean for mdb-option ?

+13. How can I disable an option from being selected (+ grayed out) ?


Damian Gemza staff answered 5 years ago


In the API tab on the Autocompleter Documentation.

Best Regards,

Damian


itay pro answered 5 years ago


Where can I find documentation about clearButtonTabIndex for mdb-auto-completer ?


Damian Gemza staff answered 5 years ago


Dear mdb2,

There's the clearButtonTabIndex which is available on mdb-auto-completer component.

About openOnFocus - there's no such an input right now. Autocompleter will open on the focus of the input.

Best Regards,

Damian


itay pro answered 5 years ago


How can I control the functionalities I achieved before for: openOnFocus, clearButtonTabIndex


Damian Gemza staff answered 5 years ago


Dear mdb2,

Unfortunately we haven't got any migration guide from the old to autocomplete to the new one.

The new autocompleter is very useful, because it allows you to define everything in your code (template of the data, a method in which you're getting the data, and others). It looks like the Angular Material autocomplete.

The code which is provided in the documentation is actually the minimum code necessary to reproduce the fully working autocompleter.

About options: Actually, we have only a few inputs available in this new autocompleter, because the rest was unuseful in it. This autocompleter is highly customizable from the customer side.

Best Regards,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes
Tags