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.

Sign up for GitHub

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

Jump to bottom

Dialog: Primefaces tooltip gets behind dialog on every click on dialog #10100

Closed
Stefke-Novo opened this issue May 9, 2023 · 14 comments · Fixed by #10117
Closed

Dialog: Primefaces tooltip gets behind dialog on every click on dialog #10100

Stefke-Novo opened this issue May 9, 2023 · 14 comments · Fixed by #10117
Assignees
@melloware
Labels
workaround A workaround has been provided
Milestone
13.0.0

Comments

@Stefke-Novo
Copy link

Stefke-Novo commented May 9, 2023 •
edited

Describe the bug

Hi , could you check this bug please if it's fixed. The thing is when Primefaces dialog is opened, whenever I click on dialog property "z-index" is getting incremented and it lefts hover component behind dialog component.

Reproducer

No response

Expected behavior

No response

PrimeFaces edition

None

PrimeFaces version

12.0

Theme

No response

JSF implementation

Mojarra

JSF version

No response

Java version

11.0.11

Browser(s)

No response
@Stefke-Novo Stefke-Novo added ‼️ needs-triage Issue needs triaging 🐞 defect Bug...Something isn't working labels May 9, 2023
@jepsar
Copy link
Member

jepsar commented May 9, 2023

See also #9295

@melloware
Copy link
Member

Have you tried this with 13.0-SNAPSHOT?

@melloware melloware added Status: Needs Reproducer Needs a reproducer showing the issue and removed 🐞 defect Bug...Something isn't working ‼️ needs-triage Issue needs triaging labels May 9, 2023
@melloware
Copy link
Member

melloware commented May 9, 2023 •
edited

Please provide an executable example using the PrimeFaces Test project. It is the only way developers can debug your problem to help.

@Stefke-Novo
Copy link
Author

Stefke-Novo commented May 9, 2023 •
edited

Sorry for not explaining the full story. Here's the whole issue.
Firstly, when I open dialog nothing is happening as expected and "z-index" value is 1012 as on picture below:
image

After clicking icon for more information (icon with question mark) strange thing happens. Dialog gets new value of "z-index" property while tooltip component remains the same. The picture below describes the issue:
Number of "z-index" now has 1015. Wherever I click on dialog the number keeps increasing by 2 or 1 mostly.
image

I don't know if the problem is solved. Could you please check? If not, is there any other solution or js document where the problem could be fixed (which I'm guessing)?
Thank you so much for help .

@melloware
Copy link
Member

We need to see your exact code as I can't reproduce your issue. So please provide a reproducer as requested.

@Stefke-Novo
Copy link
Author

This is the only code necessary to execute bug.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:jsf="http://xmlns.jcp.org/jsf"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>PrimeFaces Test</title>
	<h:outputScript name="test.js" />
	<h:outputStylesheet name="test.css" />
</h:head>
<h:body>
	<h:form id="frmTest">
		<h:panelGrid columns="1" cellpadding="5">
			<p:commandButton value="Basic" type="button"
				onclick="PF('dlg1').show();" />

			
		</h:panelGrid>
		<p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40">
			<h:outputText id="top" value="Hover me for tooltip and then click me to see a bug." />
			<p:tooltip for="top" value="Enter your username" position="right"/>
		</p:dialog>

	</h:form>

</h:body>
</html>

This is situation before after hovering and before clicking label:
image

This is situation after clicking:
image

@melloware
Copy link
Member

melloware commented May 10, 2023 •
edited

Try adding dynamic="true" to the p:dialog.

@Stefke-Novo
Copy link
Author

Unfortunately without success
Code :

<p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40" dynamic="true">
			<h:outputText id="top" value="Hover me for tooltip and then click me to se a bug." />
			<p:tooltip for="top" value="Enter your username" position="right"/>
		</p:dialog>

@melloware
Copy link
Member

melloware commented May 10, 2023 •
edited

MonkeyPatch:

if (PrimeFaces.widget.Dialog) {
    PrimeFaces.widget.Dialog.prototype.moveToTop = function() {
        this.jq.css('z-index', 1000);
    }
}

Working reproducer:
pf-10100.zip

This is because whenever a dialog is "focused" it must be the topmost element above all others. Let me see if I can fix it.

@melloware melloware added workaround A workaround has been provided and removed Status: Needs Reproducer Needs a reproducer showing the issue labels May 10, 2023
@melloware melloware self-assigned this May 10, 2023
@melloware melloware added this to the 13.0.0 milestone May 10, 2023
@melloware melloware mentioned this issue May 10, 2023
Closed
@melloware
Copy link
Member

OK I fixed it along with #9949

@Stefke-Novo
Copy link
Author

Perfect, thank you so much . So, I could use the newest version now with fixed problem ?

@melloware
Copy link
Member

No it will be fixed in 13.0.0 which is not out yet just use that MonkeyPatch for now.

@Stefke-Novo
Copy link
Author

Thank you for information.

@melloware
Copy link
Member

This is a better monkeyPatch:

if (PrimeFaces.widget.Dialog) {
    PrimeFaces.widget.Dialog.prototype.moveToTop = function() {
        if (!this.isVisible()) {
            this.jq.css('z-index', PrimeFaces.nextZindex());
        }
    }
}

melloware added a commit to melloware/primefaces that referenced this issue May 11, 2023
@melloware
Fix primefaces#10100: Tooltip should start its zIndex higher than def…
7893dc2 
…ault components
@melloware melloware mentioned this issue May 11, 2023
Merged
melloware added a commit that referenced this issue May 12, 2023
@melloware
Fix #10100: Tooltip should start its zIndex higher than default compo…
039d01b 
…nents (#10117)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@melloware melloware

Labels
workaround A workaround has been provided
Projects
None yet
Milestone
13.0.0
3 participants
@melloware @jepsar @Stefke-Novo