Project

General

Profile

Actions
Copy link

Bug #99290

closed

Search UI error: dropdown is behind grouping titles

Added by Daniel Siepmann over 1 year ago. Updated about 1 year ago.

Status:
Resolved
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
12 LTS
Start date:
2022-12-06
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
12
PHP Version:
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

  1. Start a search
  2. Find something
  3. Click on three dots to open dropdown

I would expect the dropdown to be on top, but it is hidden behind the search result grouping title, see screenshot.

Files

Screenshot from 2022-12-06 15-18-23.png (22.8 KB) Screenshot from 2022-12-06 15-18-23.png Daniel Siepmann, 2022-12-06 14:19
Actions
Copy link
 #1

Updated by Georg Ringer over 1 year ago

  • Category set to Backend User Interface
  • Target version set to 12.2
Actions
Copy link
 #2

Updated by Georg Ringer over 1 year ago

  • Status changed from New to Needs Feedback

can't reproduce that, can you retest with latest version?

Actions
Copy link
 #3

Updated by Benni Mack about 1 year ago

  • Target version changed from 12.2 to 12.3
Actions
Copy link
 #4

Updated by Daniel Siepmann about 1 year ago

12.2.0 now ends in an JS issue once I open the search:

 Uncaught TypeError: t is null
    openSearchModal https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/toolbar/live-search.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13
    trigger https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/modal.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:53
    render https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/modal.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:20
    handleEvent https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/lit-html@2.0.0/lit-html.js:6
    trigger https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    _showElement https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    execute https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    o https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    triggerTransitionEnd https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    executeAfterTransition https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    setTimeout handler*executeAfterTransition https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    _queueCallback https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    _showElement https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    show https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    execute https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    show https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    execute https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    o https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    triggerTransitionEnd https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    executeAfterTransition https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    setTimeout handler*executeAfterTransition https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    _emulateAnimation https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    show https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    show https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/bootstrap.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:7
    firstUpdated https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/modal.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13
    _$AE https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/@lit/reactive-element@1.0.0/reactive-element.js:6
    performUpdate https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/@lit/reactive-element@1.0.0/reactive-element.js:6
    scheduleUpdate https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/@lit/reactive-element@1.0.0/reactive-element.js:6
    _$EC https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/@lit/reactive-element@1.0.0/reactive-element.js:6
    requestUpdate https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/@lit/reactive-element@1.0.0/reactive-element.js:6
    o https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/@lit/reactive-element@1.0.0/reactive-element.js:6
    n https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/@lit/reactive-element@1.0.0/reactive-element.js:6
    n https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/Contrib/lit-element@3.0.0/lit-element.js:6
    ModalElement https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/modal.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13
    generate https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/modal.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:53
    advanced https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/modal.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:53
    openSearchModal https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/toolbar/live-search.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13
    registerEvents https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/toolbar/live-search.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13
    delegateTo https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/event/regular-event.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13
    delegateTo https://daniel-siepmann.de/_assets/1ee1d3e909b58d32e30dcea666dd3224/JavaScript/event/regular-event.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13
    registerEvents https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/toolbar/live-search.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13
    LiveSearch https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/toolbar/live-search.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13
    promise callback*LiveSearch https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/toolbar/live-search.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13
    <anonymous> https://daniel-siepmann.de/_assets/081fa96a07de1dccb64a8a83e1567439/JavaScript/toolbar/live-search.js?bust=04a50d5201cc905f272bd17d3591132601530ef4:13

So I can't test the issue anymore because of that new issue.

Looks like the search input is referenced before it is present. I still have the loading animation while the exception occurs.

   openSearchModal() {
        const e = Modal.advanced({
            type: Modal.types.ajax,
            content: TYPO3.settings.ajaxUrls.livesearch_form + '&q=' + (BrowserSession.get('livesearch-term') ?? ''),
            title: lll('labels.search'),
            severity: SeverityEnum.notice,
            size: Modal.sizes.medium
        });
        e.addEventListener('typo3-modal-shown', (() =>{
            this.searchTerm = BrowserSession.get('livesearch-term') ?? '';
            const r = Object.entries(BrowserSession.getByPrefix('livesearch-option-')).filter((e=>'1' === e[1])).map((e=>{
                const r = e[0].replace('livesearch-option-', ''),
                [
                    t,
                    o
                ] = r.split('-', 2);
                return {
                    key: t,
                    value: o
                }
            }));
            this.composeSearchOptions(r);
            const t = e.querySelector('input[type="search"]');
            t.clearable({
                onClear: () =>{
                    this.searchTerm = '',
                    this.search()
                }
            }),
            t.focus(),
            t.select();
Actions
Copy link
 #5

Updated by Benni Mack about 1 year ago

  • Target version changed from 12.3 to 12 LTS
Actions
Copy link
 #6

Updated by Andreas Kienast about 1 year ago

Can you please check if any of these issues still occur in current main branch?

Actions
Copy link
 #7

Updated by Daniel Siepmann about 1 year ago

  • Status changed from Needs Feedback to Resolved

Sorry Andreas, didn't setup notifications properly. Looks like this is gone with 12.4.0 release.

Actions
Copy link

Also available in: Atom PDF