Autocomplete with forceselection="false" no longer working since primefaces release 10.0.1

UI Components for JSF
Post Reply
HessiJames
Posts: 5
Joined: 23 Sep 2021, 14:13

20 Oct 2021, 11:35

Hi,

we are using autoComplete component with forceSelection="false".

In the below screenshots I used the example code from the showcase:
https://www.primefaces.org/showcase/ui/ ... lete.xhtml

Only change I did was setting forceSelection="false":

Code: Select all

        <h5>Multiple</h5>
        <p:autoComplete id="countries" multiple="true" value="#{autoCompleteView.selectedCountries}"
                        completeMethod="#{autoCompleteView.completeCountry}"
                        var="country" itemLabel="#{country.name}" itemValue="#{country}"
                        converter="#{countryConverter}" forceSelection="false" scrollHeight="250">
            <p:column>
                <span class="flag flag-#{country.code}" style="width: 30px; height: 20px" />
                <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{country.name}"/>
            </p:column>
        </p:autoComplete>
With release 10.0.0 it worked fine, we could add values from suggestion list and also new values could be entered (like 'aaa', 'bbb', ...):

Image

Starting with release 10.0.1 we see a changed behaviour. When we enter a new value (which is not on the sugestion list) and hit 'enter' key -> nothing happens

Image

We are using PrimeFaces Elite 10.0.7.

Has someone dealt with this before?

Thank you and best regards

Melloware
Posts: 2919
Joined: 22 Apr 2013, 15:48

21 Oct 2021, 20:22

Looks like this was the issue introduce in 10.0.1: https://github.com/primefaces/primefaces/issues/7211
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 10.0.7 / PF Extensions 10.0.6
PrimeReact 7.0.1

HessiJames
Posts: 5
Joined: 23 Sep 2021, 14:13

22 Oct 2021, 08:46

@Melloware Thank you! Yes, I think it's related to https://github.com/primefaces/primefaces/issues/7211

Can I do anything or should I just wait until you have time to check it?

Melloware
Posts: 2919
Joined: 22 Apr 2013, 15:48

22 Oct 2021, 13:26

Can you create a defect on GitHub Issues please with your exact example. Then we can fix it for 10.0.X and 11.0.0 before it is released.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 10.0.7 / PF Extensions 10.0.6
PrimeReact 7.0.1


Melloware
Posts: 2919
Joined: 22 Apr 2013, 15:48

22 Oct 2021, 16:15

Fixing it now.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 10.0.7 / PF Extensions 10.0.6
PrimeReact 7.0.1

HessiJames
Posts: 5
Joined: 23 Sep 2021, 14:13

25 Oct 2021, 15:18

I just realized one more thing...

If I have a p:commandButton with type="submit" on the same page.
And this commandButton is (wrongly?) executed in this constellation:

p:autoComplete with multiple="true" and forceSelection="true"

Code: Select all

	<p:commandButton type="submit" value="Alert" onclick="alert('Alert message')" style="width: 70px;"/>
									
        <h5>Multiple</h5>
        <p:autoComplete id="countries" multiple="true" value="#{autoCompleteView.selectedCountries}"
                        completeMethod="#{autoCompleteView.completeCountry}"
                        var="country" itemLabel="#{country.name}" itemValue="#{country}"
                        converter="#{countryConverter}" forceSelection="true" scrollHeight="250">
            <p:column>
                <span class="flag flag-#{country.code}" style="width: 30px; height: 20px" />
                <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{country.name}"/>
            </p:column>
        </p:autoComplete>
Now, when I enter an invalid item like 'aaa', the commandButton is executed after the 'enter' key is pressed:

Image

After 'enter' it shows up the alert message:

Image

In my opinion here might be missing a stopPropagation(), what do you think?

Thank you!

Melloware
Posts: 2919
Joined: 22 Apr 2013, 15:48

25 Oct 2021, 15:23

This looks like it was a conscious decision by PrimeTek.

Code: Select all

if($this.cfg.multiple && itemValue && valid) {
      $this.addItem(itemValue);
      e.preventDefault();
      e.stopPropagation();
 }                       
Only if a valid item is selected it stops propagation. If its invalid it allows it to go through.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 10.0.7 / PF Extensions 10.0.6
PrimeReact 7.0.1

HessiJames
Posts: 5
Joined: 23 Sep 2021, 14:13

25 Oct 2021, 16:32

I see...
But in my case I have a 'save' Button on the page and with this behaviour this will be executed every time when I enter an invalid value.
In my opinion the autocomplete component should not propagate the 'enter' key in this case.
How can I get in touch with someone from PrimeTek regarding this question?

Melloware
Posts: 2919
Joined: 22 Apr 2013, 15:48

25 Oct 2021, 16:37

I would open a GitHub issues ticket with your use case.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 10.0.7 / PF Extensions 10.0.6
PrimeReact 7.0.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 22 guests