Odd behavior in Java EE Web App when using PrimeFaces Components

The issue:

I have two <p:selectOneMenu> and when I drop the first menu down, I can not select any items in the menu, and once I click out of the menu I can not open the menu again. Then, if I open the second <p:selectOneMenu> I can select an item in the second menu, but then I can't open either menu again.

Trying to use a <p:pickList> and none of the buttons to move items around work.

<p:growl> functionally is non-existent, as is the action method never gets called.

I'm sure I could keep listing stuff that isn't working for me, but that is the three major components I am trying to use.

The setup:

A Java EE Web Application using JSF 2.3, JDK 18, primefaces-8.0.jar, on a Payara Server v5.2022.2, the primefaces-8.0.jar was imported to the library, and the source was declared as primfaces-8.0-sources.jar. My faces-config only defines a messages resource bundle and some navigation cases. As far as the web.xml it is pretty basic, see below:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>

    <session-config>
        <session-timeout>
            1440
        </session-timeout>
    </session-config>
    
    <welcome-file-list>
        <welcome-file>/index.xhtml</welcome-file>
    </welcome-file-list>
    
    <filter>
        <filter-name>MyFilter</filter-name>
        <filter-class>Filters.AuthFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>AuthFilter</filter-name>
        <url-pattern>*.xhtml</url-pattern>
    </filter-mapping>
    
</web-app>

Libraries:

index.xhtml Code:

<?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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <h:head>
        <title>Title</title>
        <h:outputStylesheet library="css" name="primeflex3.1.2.css"/>
        <h:outputStylesheet library="css" name="styles.css"/>
        <h:outputStylesheet library="css" name="datatables.css"/>
        <h:outputScript library="js" name="datatables.min.js"/>
    </h:head>

    <h:body>
     <h:form>   
        <ui:include src="edit.xhtml"/>
     </h:form>
  </h:body>
</html>

edit.xhtml Code:

<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:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition>
            <h:form rendered="#{navBean.currentTabIndexIsEdit}" >
                <center>
                        <h:outputLabel for="@next" value="Assigned Shop"/>
                            <p:selectOneMenu id="shops_menu" value="#{edit_Bean.job.shop_id}" appendTo="@this" >
                                <f:selectItem itemLabel="Select Shop" itemValue="" />
                                <f:selectItem itemValue="1" itemLabel="Broussard, Louisiana" />
                                <f:selectItem itemValue="2" itemLabel="North Louisiana" />
                                <f:selectItem itemValue="3" itemLabel="South Texas" />
                                <f:selectItem itemValue="4" itemLabel="West Texas" />
                            </p:selectOneMenu>

                            <h:outputLabel>Rig Name </h:outputLabel>
                            <p:selectOneMenu id="rigs_menu" value="#{edit_Bean.job.rig_id}" appendTo="@this">
                                <f:selectItems value="#{edit_Bean.rigs}" var="rigs" itemLabel="#{rigs.rig_name}" itemValue="#{rigs.rig_id}" />
                            </p:selectOneMenu>

                <!-- Other Items -->
                </center>
             </form>
    </ui:composition>
</html>

edit_Bean.java Code:

No much to put here, its just a named bean with a session scope with a few supporting methods.

Thanks for any help in advance!

Solution

The solution

If you see in index.xhtml, I am including a javascript file from datatables. That particular version of the JS file from data tables included its own jQuery version, which was conflicting with primefaces. I re-downloaded the datatables java script with out jQuery selected and it is now working.