Choices doesn't close on outside click when targeting a rich text editor

doriandevelops commented 3 months ago

maryUI version

1.25

daisyUI version

4.7.3

Livewire version

3.4

What browsers are affected?

Firefox, Chrome

What happened?

Uploading Screen Recording 2024-06-12 at 11.42.53 PM.mov…

I'm using a choices input above a maryUI RTE component and I noticed that when I click into the RTE the choices doesn't close. Only seems to be happening on the RTE. When I click on other fields the choices input closes just fine. RTE is following the docs recommendation of using Tinymce and I have imported the SDK for the RTE into my codebase.

               <div class="col-span-1 md:col-span-2">
                    <x-mary-choices label="Age groups" wire:model="age_groups" :options="$ageGroupOptions" multiple/>
                </div>
                <div class="col-span-1 md:col-span-2">
                    @php
                        $configRTE = [
                            'statusbar' => false,
                            'toolbar' => 'undo redo | styles | bold italic underline',
                            'quickbars_selection_toolbar' => 'bold italic link',
                        ];
                    @endphp
                    <x-mary-editor label="Description" wire:model="description"
                                   :config="$configRTE"
                    />
                </div>

With my current layout I have the choices right above my RTE so it's kind of bad UX for the user if they can't close it by selecting the RTE as their next input. I can move the RTE and it's not a really big deal but figured I'd report it since it might be an easy fix.

I'm new to TALL stack if you have a quick and dirty fix that I can do on my end to resolve this I'll do that. Didn't want to try to hack an inline script to target the choices and close it manually because like I said not a big enough deal but figured it's be helpful to report.

I tried to add a quick screen recording but not sure it's going to upload...

Thanks!

doriandevelops commented 3 months ago

screen capture of issue https://drive.google.com/file/d/1XQgsmULifrs6VoHj6qM0pvXk3fcu7Zx7/view?usp=sharing

robsontenorio commented 3 months ago

We already have a "click outside" handler for Choices.

https://github.com/robsontenorio/mary/blob/main/src/View/Components/Choices.php#L91

Maybe the tinyMCE itself (not maryUI) has some event handling that is interfering. If so, we need a way to disable it.

robsontenorio commented 3 months ago

That is confirmed.

Actually the issue is with iframe html element that does't not bubble up the mousedown event (click). As tinyMCE runs with an iframe the "click outside" from Choices won't work.

If someone could give a try on this I really appreciate.

robsontenorio / mary