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

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

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.

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

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

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

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).

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?

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"

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

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...

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).

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

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

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

In the API tab on the Autocompleter Documentation.

Best Regards,

Damian

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

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

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

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