A current project involves implementing JSF Mojarra 2.3.9.SP02 alongside PrimeFaces 7.0 on Wildfly 17 using the Sapphire template provided by PrimeFaces. However, I've encountered a significant issue with a specific <p:inputText element within my form. This input field has a specified placeholder and an initial empty value. It is situated as the first input field below the panel group labeled "Kontaktperson" (refer to attached image)
https://i.stack.imgur.com/j7CzZ.png
Below you can find a concise example of the code:
=========== .xhtml file ==================
<!DOCTYPE html>
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<title>Hello</title>
<h:outputScript name="js/nanoscroller.js" library="sapphire-layout" />
<h:outputScript name="js/layout.js" library="sapphire-layout" />
<h:outputScript name="js/ripple.js" library="sapphire-layout" />
</h:head>
<h:body>
<style>
.md-inputfield_marg_top{
margin-top: 10px;
}
</style>
<div class="ui-g ui-fluid">
<div class="card card-w-title">
<h:form id="resultsFormId">
<div class="card-title">Edit Company Details</div>
<p:fieldset legend="Contact Person" toggleable="true" toggleSpeed="500">
<div class="ui-g-12 ui-md-2">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">
<i class="material-icons">account_circle</i>
</span>
<h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
<p:inputText value="#{fdTestBean.titel}" placeholder="Mr."/>
<label>Title</label>
</h:panelGroup>
</div>
</div>
<div class="ui-g-12 ui-md-2"/>
<div class="ui-g-12 ui-md-8">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">
<i class="material-icons">account_circle</i>
</span>
<h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
<p:inputText value="#{fdTestBean.qualifikation}" />
<label>Qualification</label>
</h:panelGroup>
</div>
</div>
<div class="ui-g-12 ui-md-6">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">
<i class="material-icons">account_circle</i>
</span>
<h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
<p:inputText value="#{fdTestBean.vorname}"/>
<label>First Name</label>
</h:panelGroup>
</div>
</div>
<div class="ui-g-12 ui-md-6">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">
<i class="material-icons">account_circle</i>
</span>
<h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
<p:inputText value="#{fdTestBean.nachname}"/>
<label>Last Name</label>
</h:panelGroup>
</div>
</div>
</p:fieldset>
</h:form>
</div>
</div>
<h:outputStylesheet name="css/nanoscroller.css" library="sapphire-layout" />
<h:outputStylesheet name="css/ripple.css" library="sapphire-layout" />
<h:outputStylesheet name="css/grid.css" library="sapphire-layout" />
<h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="sapphire-layout" />
</h:body>
</html>
For reference, here is the associated backing bean code:
package at.home.digest.web.ave.makler.firma;
import java.io.Serializable;
import javax.inject.Named;
@Named("fdTestBean")
@javax.faces.view.ViewScoped
public class FDTestBean implements Serializable {
private String titel;
private String qualifikation;
private String vorname;
private String nachname;
public String getTitel() {
return titel;
}
public void setTitel(String titel) {
this.titel = titel;
}
public String getQualifikation() {
return qualifikation;
}
public void setQualifikation(String qualifikation) {
this.qualifikation = qualifikation;
}
public String getVorname() {
return vorname;
}
public void setVorname(String vorname) {
this.vorname = vorname;
}
public String getNachname() {
return nachname;
}
public void setNachname(String nachname) {
this.nachname = nachname;
}
}