Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

selectOneMenu: Selecting a record by typing some letters does not work #4682

Closed
wlhUser opened this issue Mar 25, 2019 · 15 comments

Comments

Projects
None yet
4 participants
@wlhUser
Copy link

commented Mar 25, 2019

1) Environment
PrimeFaces 7.0 -> here it does not work
(PrimeFaces 6.2 -> here it works)
Browsers: Tested on Firefox 66 and Chrome 72 (suppose the problem is not browser related)

2) Expected behavior
When setting the focus on the p:selectOneMenu component in the browser, without having it expanded, and typing a few letters, the item which starts with all typed letters should be selected.

3) Actual behavior
In PF7.0 for each typed letter the entry starting with exactly this letter is selected.

  1. Steps to reproduce
    a. Use the sample xhtml and Sample Bean attached.
    b. Focus the pSelectOneMenu component by clicking on it and collapsing it again (in our application the user will step through the elements by pressing Tab change the focus)
    c. Type 'ABCD'
    d. In PF6.2, the record ABCD will be selected. (This is what I expect.)
    e. In PF7.0 the selected record will change after each typed key, and in the end the record 'DA' will be selected.

5) Sample XHTML


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets" 
	xmlns:p="http://primefaces.org/ui">
<h:head>
	
</h:head>
<h:body>

	<p:selectOneMenu id="test" value="#{testBean.value}" 
		effect="none"  filter="false" 
		filterMatchMode="startsWith" >  
		<f:selectItem itemLabel="" itemValue="#{null}" />  
		<f:selectItem itemLabel="AA" itemValue="AA" />  
		<f:selectItem itemLabel="AB" itemValue="AB" />  
		<f:selectItem itemLabel="ABC" itemValue="ABC" />  
		<f:selectItem itemLabel="ABCD" itemValue="ABCD" />  
		<f:selectItem itemLabel="BA" itemValue="BA" />  
		<f:selectItem itemLabel="BB" itemValue="BB" />
		<f:selectItem itemLabel="CA" itemValue="CA" />  
		<f:selectItem itemLabel="DA" itemValue="DA" />  
		</p:selectOneMenu>	
</h:body>
</html>

6) Sample Bean


import java.io.Serializable;

import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

@SessionScoped
@Named("testBean")
public class TestBean implements Serializable {
   
    private static final long serialVersionUID = 1L;

    private String value = null;

    public String getValue() {
        return value;
    }

    public void setValue(final String value) {
        this.value = value;
    }

}

@tandraschko tandraschko added the defect label Mar 25, 2019

@tandraschko tandraschko changed the title selectOneMenu: Selecting a record by typing some letters does not work in PF7.0. Worked in PF6.2 selectOneMenu: Selecting a record by typing some letters does not work Mar 25, 2019

@melloware

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2019

Runnable Test Case:
pf-4682.zip

@melloware

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2019

OK this was done on purpose as part of this ticket: #2356

This was requested to make it behave like the regular HTML5 select box. The reason we do this is because of Principal Of Least Astonishment https://en.wikipedia.org/wiki/Principle_of_least_astonishment.

"More generally, the principle means that a component of a system should behave in a way that most users will expect it to behave; the behavior should not astonish or surprise users."

@wlhUser

This comment has been minimized.

Copy link
Author

commented Mar 25, 2019

Hi Melloware,

I'm not sure how to understand your comment.
I've just tested the HTML select box, and it works in the same way as I'm expecting it to work.

Attached you find an extended version of the XHTML page, which contains a p:SelectOneMenu component and a HTML select. If I'm typing 'ABCD' int the HTLM select box, the record 'ABCD' is selected.

Maybe there is a misunderstanding. In case I type my letters slowly, waiting about 1 sec after each keypress, the behavior expected in #2356 will be experienced, But if you type a bit faster (like a user you knows what to type) my expected behavior will be seen.

SAMPLE XHTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets" 
	xmlns:p="http://primefaces.org/ui">
<h:head>
	
</h:head>
<h:body>
<h:outputText value="PrimeFaces selectOneMenu"/>
<br/>
	<p:selectOneMenu id="test" value="#{testBean.value}" 
		effect="none"  filter="false" 
		filterMatchMode="startsWith" >  
		<f:selectItem itemLabel="" itemValue="#{null}" />  
		<f:selectItem itemLabel="AA" itemValue="AA" />  
		<f:selectItem itemLabel="AB" itemValue="AB" />  
		<f:selectItem itemLabel="ABC" itemValue="ABC" />  
		<f:selectItem itemLabel="ABCD" itemValue="ABCD" />  
		<f:selectItem itemLabel="BA" itemValue="BA" />  
		<f:selectItem itemLabel="BB" itemValue="BB" />
		<f:selectItem itemLabel="CA" itemValue="CA" />  
		<f:selectItem itemLabel="DA" itemValue="DA" />  
	</p:selectOneMenu>
		
		<br/><br/>
		<h:outputText value="HTML select"/>
		<br/>
		<select >
			<option></option>  
			<option>AA</option>  
			<option> AB</option>  
			<option> ABC</option>  
			<option> ABCD</option>  
			<option> BA</option>  
			<option> BB</option>
			<option> CA</option>  
			<option> DA</option>  
		</select>
</h:body>
</html>

@melloware

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2019

Hmm so there is a must be some built in delay of whether to use the next letter or to keep this letter and cycle through the options with that letter. Sounds like we need a combination of the old behavior and the new behavior.

@wlhUser

This comment has been minimized.

Copy link
Author

commented Mar 25, 2019

p:selectOneMenu from PF 6.2 already combines the two approaches already, It works (almost) exactly like the HTML select. The only difference is the delay time. This is in PF 6.2 slightly bigger than in HTML select.
Maybe this is the reason, why the ticket #2356 was created.

@melloware

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2019

You are right looking at the code it uses a full 1000 delay. Maybe that is too long compared to the regular HTML5 select box? I will revert the change and lower that delay so I can get it to match the HTML5 version.

@wlhUser

This comment has been minimized.

Copy link
Author

commented Mar 25, 2019

Thank you.
But please do not lower the delay too much. I did not measure it in HTML select but it is not much lover than 1sec - maybe 800ms.

@melloware

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2019

OK so I just tested 6.2 vs 7.0 with your example and 6.2 is not quite the same as HTML5. In your Example if I press "A" it selects "AA" the first record starting with "A" If I pause for 5 full seconds and press "A" again nothing happens. The ticket #2356 was created for exactly that reason those users were saying it should go to the next "A" item. Can you confirm with 6.2. I cannot get 6.2 to behave like the HTML5 box.

@wlhUser

This comment has been minimized.

Copy link
Author

commented Mar 25, 2019

Yes you are right. To step through all records starting with 'A', by repeatedly pressing 'A' (with a pause in between), does not work in PF6.2. This is a different behavior compared to the HTML select.

Finally, neither PF6.2 nor PF 7.0 behave like exactly the same as the HTML select.

@melloware

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2019

OK well at least I feel better that neither behavior 100% matched HTML5 select. So we will leave this bug open to try and make both scenarios work. But it explains why #2356 was created and voted by users.

@melloware

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2019

OK I think I got it. PR submitted now it behaves ALMOST identically to the HTML5 keyboard navigation. Basically I look for an exact match and if not found then I fallback to the cycling through the first letter. I tested it pretty heavily and I am happy with how it is working. Definitely an improvement over 6.2 and 7.0.

@wlhUser

This comment has been minimized.

Copy link
Author

commented Mar 26, 2019

Great. Thanks a lot. Looking forward to test it.

tandraschko added a commit that referenced this issue Mar 26, 2019

Merge pull request #4692 from melloware/PF4682
Fix #4682: SelectOneMenu key filtering match HTML5 select one.

@tandraschko tandraschko added enhancement and removed defect labels Mar 26, 2019

@tandraschko tandraschko added this to the 7.1 milestone Mar 26, 2019

@melloware

This comment has been minimized.

Copy link
Contributor

commented Mar 26, 2019

@wlhUser If you want to test it out just pull down the 7.1-SNAPSHOT.

<dependency>
     <groupId>com.github.primefaces</groupId>
     <artifactId>primefaces</artifactId>
     <version>master-SNAPSHOT</version>
 </dependency>

 <repositories>
 	<repository>
 	    <id>jitpack.io</id>
 	    <url>https://jitpack.io</url>
 	</repository>
 </repositories>
@wlhUser

This comment has been minimized.

Copy link
Author

commented Mar 28, 2019

Have tested with master-SNAPSHOT from 2018-03-28.
For me the component works now as expected.

Thank you.

@melloware

This comment has been minimized.

Copy link
Contributor

commented Mar 28, 2019

Thanks for testing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.