The functionality of onClick or onChange seems to be malfunctioning in the preline user interface select component

Question

The functionality of onClick or onChange seems to be malfunctioning in the preline user interface select component

I recently integrated the preline UI library into my React project to enhance the design of my website. However, I encountered an issue where using the "select" element with the data-hs-select attribute as suggested by preline UI seemed to cause problems with onChange and onClick events. Strangely, nothing was triggered in the console when these events were fired. Despite this, the selected value was displayed correctly on the browser interface. Interestingly, I was able to retrieve the selected value using useRef or document selector methods.

Even after attempting to solve the issue by using formik field [as='select'], the problem persisted.

<select
      name='Country'
      data-hs-select='{
        "hasSearch": true,
        "searchPlaceholder": "Search...",
        "searchClasses": ...
      }'
      className='hidden'
      onChange={() => console.log('option clicked')}
    >
      <option value=''>Choose</option>
      <option value='Australia'>Australia</option>
      <option value='Canada'>Canada</option>
      <option value='France'>France</option>
      <option value='Germany'>Germany</option>
      <option value='Italy'>Italy</option>
    </select>

html css reactjs formik tailwind-ui

Answer 1

Answer №1

The onChange event is documented in the official Preline documentation.

For more information, visit Preline Docs

Answer 2

The onChange event is documented in the official Preline documentation.

For more information, visit Preline Docs

Answer 3

Answer №2

When navigating through inspect mode, the actual options remain hidden while the visible options in the UI are generated div elements with tailwind CSS classes. This causes the onChange method to not be triggered when changing the options.

After exploring a simple solution, here are the steps I discovered:

In your "select" component file,

Add an "id" attribute to the select tag

<select id='selectId' ... > //your options... </ select>
Ensure to include the HSSelect class at the beginning of the file as well.

import { HSSelect } from "preline/preline"
Create a useEffect function:

useEffect(() => {
  const loadPreline = async() => {
    const { HSSelect } = (await import("preline/preline"))
    const el = HSSelect.getInstance("#selectId") as HSSelect
    el.on("change", (value: string) => {
      console.log(value)
    })
  }
  loadPreline()
  
}, [])

Remember to import HSSelect within the loadPreline function. Since this is client-side code, dynamic importing is crucial for proper execution.

When obtaining the instance using HSSelect.getInstance("#selectId") as HSSelect, be sure to explicitly assign it to the HSSelect class from the package "preline/preline". Failure to do so may result in unexpected behavior.

Although it's a belated discovery, I trust this information will prove valuable in future endeavors. Thank you.

Answer 4

When navigating through inspect mode, the actual options remain hidden while the visible options in the UI are generated div elements with tailwind CSS classes. This causes the onChange method to not be triggered when changing the options.

After exploring a simple solution, here are the steps I discovered:

In your "select" component file,

Add an "id" attribute to the select tag

<select id='selectId' ... > //your options... </ select>
Ensure to include the HSSelect class at the beginning of the file as well.

import { HSSelect } from "preline/preline"
Create a useEffect function:

useEffect(() => {
  const loadPreline = async() => {
    const { HSSelect } = (await import("preline/preline"))
    const el = HSSelect.getInstance("#selectId") as HSSelect
    el.on("change", (value: string) => {
      console.log(value)
    })
  }
  loadPreline()
  
}, [])

Remember to import HSSelect within the loadPreline function. Since this is client-side code, dynamic importing is crucial for proper execution.

When obtaining the instance using HSSelect.getInstance("#selectId") as HSSelect, be sure to explicitly assign it to the HSSelect class from the package "preline/preline". Failure to do so may result in unexpected behavior.

Although it's a belated discovery, I trust this information will prove valuable in future endeavors. Thank you.

The functionality of onClick or onChange seems to be malfunctioning in the preline user interface select component

Answer №1

Answer №2

Similar questions

Improving List performance with React.cloneElement

I am encountering difficulties accessing the cPanel URL following deployment on Vercel

Every time I attempt to run the npx command, I encounter an error that says: "Error: EPERM: operation not permitted

Steps for properly inserting a hyperlink:

How can I transform an HTML element into a textarea using CSS or JavaScript?

The Wonders of Flex Box and Media Queries

Solving problems with accessing global variables in React Redux

What is the impact of a floated element on vertical spacing?

ReactJS encountered an issue while attempting to remove an item from the state

When using React router, I'm experiencing a redirection issue where instead of being directed to the /login route,

Locate the present position of the slider element

Issue with React - Axios get request resulting in empty data response

"Implementing state changes within a static function in React Native – a simple

Select a random class from an array of classes in JavaScript

My custom Wordpress template experiences a hiccup with the jQuery slideshow, as it unexpectedly

What is the best way to stop a select menu option from being highlighted once it has been clicked on?

What is the best way to increase the spacing between inline-block elements?

Styling with CSS to show an image and text on the same line

Is extracting the primary image from a WordPress post using raw post data the ideal solution?

JavaScript Issue Causing Jquery Carousel Dysfunction