Multiple Select: setValue method does not execute select change event

[Nurai1]

Describe the bug
Multiple Select setValue method does not execute neither select change event nor custom 'valueChange.te.select' event.

To Reproduce
Steps to reproduce the behavior:

1. Create Multiple Select via tw-elements like in the example docs.
2. Create some button where you programmatically set values for select.
3. Create event listener on select
4. Programmatically set values for select via button and check that event haven't executed.

Expected behavior
Change Event executed after setValue.

[juujisai]

Hi, thanks for letting us know. I'm adding this to our list

[azica]

please tell me how i can get value of datepicker?

[iprzybysz]

Hi @azica, it would be awesome if you could post your questions in a separate issue. That way, we can give you the best help possible.

[iprzybysz]

please tell me how i can get value of datepicker?

To achieve this, you can use input event. Here is an example code:

<div
  class="relative mb-3"
  data-te-datepicker-init
  data-te-input-wrapper-init
  >
   <input
     id="my-input"
     type="text"
     class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
     placeholder="Select a date" />
   <label
     for="floatingInput"
     class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
     >Select a date</label>
</div>

// JS
// Initialization for ES Users
import { Datepicker, Input, initTE } from "tw-elements";

initTE({ Datepicker, Input });

const myInput = document.getElementById("my-input");
myInput.addEventListener("input", (e) => {
  console.log(e.target.value);
});