JavaFx ComboBox is not getting correct value on first click

I have a Combo Box from java FXML, i have populated it with my array list. When i click on the combo box for the frist time it returns null but then when i click on it again it would return the correct value. What should really happen is that when i click on the combo box for the first time it should return the correct value the first click not the second click.

What i had :

package main.controller.manageAccounts;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ComboBox;
import javafx.scene.control.TextField;
import javafx.scene.input.MouseEvent;
import main.model.MangeAccounts.ManageAccountsModel;

import java.net.URL;
import java.sql.SQLException;
import java.util.ResourceBundle;

public class ManageAccountsController implements Initializable {
    public ManageAccountsModel manageAccountsModel = new ManageAccountsModel();

    @FXML
    private ComboBox<String> customerDropDownList;
    @FXML
    private TextField txtUsername, txtFirstName, txtLastName, txtPassword, txtSecretQuestion, txtSecretQuestionAnswer;


    @Override
    public void initialize(URL location, ResourceBundle resources) {
        try {
            populateCustomerdropDownList();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }

        if (manageAccountsModel.isDbConnected()) {
            System.out.println("Database connection established");
        } else {
            System.out.println("Database connection not established");
        }
    }

    public void populateCustomerdropDownList() throws SQLException {
        customerDropDownList.setItems(manageAccountsModel.getEmployeeId());
    }

    public void setFields(MouseEvent mouseEvent) throws SQLException {
        String getEmployeeId = customerDropDownList.getValue();
        int employeeId = Integer.parseInt(getEmployeeId);
        txtUsername.setText(manageAccountsModel.getUserName(employeeId));
        txtFirstName.setText(manageAccountsModel.getFirstName(employeeId));
        txtLastName.setText(manageAccountsModel.getLastName(employeeId));
        txtPassword.setText(manageAccountsModel.getPassword(employeeId));
        txtSecretQuestion.setText(manageAccountsModel.getSecretQuestion(employeeId));
        txtSecretQuestionAnswer.setText(manageAccountsModel.getSecretQuestionAnswer(employeeId));
        System.out.println(employeeId);
    }
}

What i have tried :

    public void populateCustomerdropDownList() throws SQLException {
        customerDropDownList.setItems(manageAccountsModel.getEmployeeId());
    }

    public void setFields(MouseEvent mouseEvent) throws SQLException {
        customerDropDownList.addEventFilter(MouseEvent.MOUSE_CLICKED, (event) -> {
            String getEmployeeId = customerDropDownList.getValue();
            int employeeId = Integer.parseInt(getEmployeeId);
            try {
                txtUsername.setText(manageAccountsModel.getUserName(employeeId));
                txtFirstName.setText(manageAccountsModel.getFirstName(employeeId));
                txtLastName.setText(manageAccountsModel.getLastName(employeeId));
                txtPassword.setText(manageAccountsModel.getPassword(employeeId));
                txtSecretQuestion.setText(manageAccountsModel.getSecretQuestion(employeeId));
                txtSecretQuestionAnswer.setText(manageAccountsModel.getSecretQuestionAnswer(employeeId));
                System.out.println(employeeId);
            } catch (SQLException  e) {
                System.out.println("Work?");
            }
        });
    }

FXML File :

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<AnchorPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="main.controller.manageAccounts.ManageAccountsController">
   <children>
      <StackPane prefHeight="400.0" prefWidth="600.0">
         <children>
            <ComboBox fx:id="customerDropDownList" onMouseClicked="#setFields" prefWidth="150.0" translateY="80.0" StackPane.alignment="TOP_CENTER" />
            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Select Customer" translateY="60.0" StackPane.alignment="TOP_CENTER" />
            <TextField fx:id="txtUsername" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="30.0" prefWidth="200.0" text="Change Username" translateY="-60.0" />
            <TextField fx:id="txtFirstName" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="30.0" prefWidth="200.0" text="Change First Name" translateY="-25.0" />
            <TextField fx:id="txtLastName" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="30.0" prefWidth="200.0" text="Change Last Name" translateY="10.0" />
            <TextField fx:id="txtPassword" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="30.0" prefWidth="200.0" text="Change Password" translateY="45.0" />
            <TextField fx:id="txtSecretQuestion" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="30.0" prefWidth="200.0" text="Change Secret Question" translateY="80.0" />
            <TextField fx:id="txtSecretQuestionAnswer" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="30.0" prefWidth="200.0" text="Change Secret Answer Question" translateY="115.0" />
            <Button mnemonicParsing="false" text="Button" translateY="-30.0" StackPane.alignment="BOTTOM_CENTER" />
            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Manage User Accounts" translateY="20.0" StackPane.alignment="TOP_CENTER">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Text>
         </children>
      </StackPane>
   </children>
</AnchorPane>

Solution

Correct Fix to make it so so that the first click would get the value selected instead of returning null and making user have to click on the combo box again is :

Change in FXML file onMouseClicked="#setFields" to onAction="#setFields" as mentioned by James and change public void setFields(MouseEvent mouseEvent) to public void setFields(ActionEvent event)

Doing this once the user clicks on the drop down the value will be taken immediately.

Updated Code

    public void setFields(ActionEvent event) throws SQLException {
        String getEmployeeId = customerDropDownList.getValue();
        int employeeId = Integer.parseInt(getEmployeeId);
        try {
            txtUsername.setText(manageAccountsModel.getUserName(employeeId));
            txtFirstName.setText(manageAccountsModel.getFirstName(employeeId));
            txtLastName.setText(manageAccountsModel.getLastName(employeeId));
            txtPassword.setText(manageAccountsModel.getPassword(employeeId));
            txtSecretQuestion.setText(manageAccountsModel.getSecretQuestion(employeeId));
            txtSecretQuestionAnswer.setText(manageAccountsModel.getSecretQuestionAnswer(employeeId));
            System.out.println(employeeId);
        } catch (SQLException e) {
            System.out.println("Work?");
        }
    }