Search Input Triggers Dropdown

[shiruken1]

Describe the bug

Clicking on a Search component triggers a neighboring Dropdown to open

Reproduction

https://svelte.dev/repl/a621608feb7c401b91f137ad431cfa23?version=4.2.15

Flowbite version and System Info

System:
    OS: Linux 5.15 elementary OS 6.1 Jólnir
    CPU: (24) x64 Intel(R) Xeon(R) CPU E5-2620 v3 @ 2.40GHz
    Memory: 38.73 GB / 125.77 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.12.0 - /usr/bin/node
    Yarn: 1.22.18 - /usr/bin/yarn
    npm: 10.5.0 - /usr/bin/npm
    pnpm: 8.14.3 - ~/.local/share/pnpm/pnpm
    bun: 1.0.25 - ~/.bun/bin/bun
    Watchman: 20230101.175141.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 123.1.64.109
    Chrome: 123.0.6312.86
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.0 
    flowbite-svelte: ^0.44.17 => 0.44.22 
    svelte: ^4.2.0 => 4.2.10 
    vite: ^5.0.0 => 5.0.12

[jumtp]

this 'bug' can be reproduction with 'any way'

if you put a 'any component' before dropdown.the dropdown will be triggers when you click 'any component'

how to standard use 'Dropdown' ?

there was a 'Button' component before default 'Dropdown'.

why ?

the sample from dropdown examples

guess what you need

maybe that's what you want input suggestion. flowbite-svelte seems to be based on flowbite so you have to work for yourself and referring to the source code of antdesign may help you

[shiruken1]

I think what you're trying to say is I'm using the component wrong.

Assuming that's what you're trying to say, I'll just say that either the Search input is tripping the dropdown's event handler, or the dropdown's bind:open is not being honored.

Here's where the examples show bind:open is supposed to be honored: https://flowbite-svelte.com/docs/components/dropdown#Programatic_open/close

[jumtp]

I think what you're trying to say is I'm using the component wrong.

Assuming that's what you're trying to say, I'll just say that either the Search input is tripping the dropdown's event handler, or the dropdown's bind:open is not being honored.

Here's where the examples show bind:open is supposed to be honored: https://flowbite-svelte.com/docs/components/dropdown#Programatic_open/close

misunderstanding

you say I think what you're trying to say is I'm using the component wrong.that's i want to say.but now i get new info from you.

now I think you mean

The any component is not allow to control Dropdown Component show or hidden because use bind:open={isShow} so should use isShow control Dropdown Component show or hidden. Do I understand correctly?

[shiruken1]

Yes! Exactly! May 7, 2024 1:10:30 AM jumtp ***@***.***>:

…

I think what you're trying to say is I'm using the component wrong. Assuming that's what you're trying to say, I'll just say that either the Search input is tripping the dropdown's event handler, or the dropdown's bind:open is not being honored. Here's where the examples show bind:open is supposed to be honored: https://flowbite-svelte.com/docs/components/dropdown#Programatic_open/close *misunderstanding* you say *I think what you're trying to say is I'm using the component wrong*.that's i want to say.but now i get new info from you. *now I think you mean* The *any component* is not allow to control *Dropdown Component* show or hidden because use *bind:open={isShow}* so should use *isShow* control *Dropdown Component* show or hidden. Do I understand correctly? — Reply to this email directly, view it on GitHub[#1340 (comment)], or unsubscribe[https://github.com/notifications/unsubscribe-auth/ACNCM6TCLNWLYAGUS7DPGWLZBBV5NAVCNFSM6AAAAABHGFWDNCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJXGUZDCNRYGQ]. You are receiving this because you authored the thread. [Tracking image][https://github.com/notifications/beacon/ACNCM6TWX5VGI6HCXH4QU2LZBBV5NA5CNFSM6AAAAABHGFWDNCWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTT5AWSBI.gif]

[jumtp]

Is this a bug or feature?

Need to confirm if this is a bug @shinokada

The problem is from follwing code if this is a bug

flowbite-svelte/src/lib/utils/Popper.svelte

Lines 130 to 140 in 6ff61d2

	if (triggeredBy) triggerEls = [...document.querySelectorAll<HTMLElement>(triggeredBy)];
	else triggerEls = contentEl.previousElementSibling ? [contentEl.previousElementSibling as HTMLElement] : [];
	if (!triggerEls.length) {
	console.error('No triggers found.');
	}
	triggerEls.forEach((element: HTMLElement) => {
	if (element.tabIndex < 0) element.tabIndex = 0; // trigger must be focusable
	for (const [name, handler, cond] of events) if (cond) element.addEventListener(name, handler);
	});

the code make some HtmlElement has event through the 'triggeredBy' . Obviously the code executes previousElementSibling on line 131

Difficulties in solving this problem

Popper is a common utils and the above are the components that use it (from webstorm search) so i think modify Popper is not better and friendly to maintain code method.Because Popper will influence the above components.

maybe follwing code can resolve this problem (Not rigorous, not tested)

1. Popper plus export let isNeedTriggers and then we can use isNeedTriggers control allow or not allow addEventListener through Dropdown set isNeedTriggers={false}
2. we need use dispatch call show/hidden throug update follwing code
   

   flowbite-svelte/src/lib/utils/Popper.svelte

   Lines 55 to 63 in 6ff61d2

   	const showHandler = (ev: Event) => {
   	if (referenceEl === undefined) console.error('trigger undefined');
   	if (!reference && triggerEls.includes(ev.target as HTMLElement) && referenceEl !== ev.target) {
   	referenceEl = ev.target as HTMLElement;
   	block();
   	}
   	if (clickable && ev.type === 'focusin' && !open) block();
   	open = clickable && ev.type === 'click' && !_blocked ? !open : true;
   	};