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

InputPlace: Autocomplete list hidden behind a dialog #1551

Closed
Jimmy12384 opened this issue May 16, 2024 · 0 comments · Fixed by #1552
Closed

InputPlace: Autocomplete list hidden behind a dialog #1551

Jimmy12384 opened this issue May 16, 2024 · 0 comments · Fixed by #1552
Assignees
Labels
defect Something isn't working
Milestone

Comments

@Jimmy12384
Copy link

Describe the bug

When the input place component is used inside of a dialog, the autocomplete list is shown to be hidden behind the actual dialog. This seems to occur due to the usage of ui-front in input place sets the z-index to 100. The dialog has a much higher z-index, sitting around 1015 in an in-line style.
image

Reproducer

Reproducing: Sample Code

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:pe="http://primefaces.org/ui/extensions">
	<h:form>
		<p:commandButton styleClass="mb-2 mt-3 grid" onclick="PF('wgtExampleDialog').show()"
			value="Open Dialog">
			<p:resetInput target="frmExampleInputPlace" />
		</p:commandButton>
	</h:form>
	<h:form id="frmExampleInputPlace">
		<p:dialog id="dlgExampleDialog"
			header="Example Dialog"
			widgetVar="wgtExampleDialog" modal="true">
			<p:outputPanel id="txtPlaceGroup" styleClass="ui-inputgroup">
				<p:outputLabel class="ui-inputgroup-addon"
					title="Place">
					<i class="fa-solid fa-location-dot" />
				</p:outputLabel>
				<pe:inputPlace id="txtPlace" widgetVar="locFinder"
					value="#{exampleForm.location.name}"
					placeholder="Enter Location Name"
					styleClass="w-full observes-place-change" apiType="azure"
					apiKey="#{example.azureApiKey}" restrictTypes="fuzzy">
					<p:ajax event="placeChanged" listener="#{example.onPlaceChanged}"
						update="@(.observes-place-change)" process="@this" />
				</pe:inputPlace>
			</p:outputPanel>
			<p:message for="txtPlace" styleClass="ml-0">
				<p:autoUpdate />
			</p:message>
		</p:dialog>
	</h:form>
</ui:composition>

Reproducing: Steps

  1. Click the dialog
  2. Input any company name into the location without clicking enter or leaving input

Expected behavior

I expect that the autocomplete list to load in front of the dialog to allow for place autocomplete within the dialog

PrimeFaces Extensions version

14.0.0

JSF implementation

All

JSF version

No response

Browser(s)

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
defect Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants