Actions
Bug #99290
closed
Search UI error: dropdown is behind grouping titles
Added by Daniel Siepmann almost 2 years ago. Updated 5 months ago.
Start date:
2022-12-06
Due date:
% Done:
0%
Estimated time:
TYPO3 Version:
12
PHP Version:
Tags:
Complexity:
Is Regression:
Sprint Focus:
Description
- Start a search
- Find something
- 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 |
Updated by Georg Ringer almost 2 years ago
- Category set to Backend User Interface
- Target version set to 12.2
Updated by Georg Ringer almost 2 years ago
- Status changed from New to Needs Feedback
can't reproduce that, can you retest with latest version?
Updated by Benni Mack almost 2 years ago
- Target version changed from 12.2 to 12.3
Updated by Daniel Siepmann almost 2 years 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();
Updated by Benni Mack over 1 year ago
- Target version changed from 12.3 to 12 LTS
Updated by Andreas Kienast over 1 year ago
Can you please check if any of these issues still occur in current main branch?
Updated by Daniel Siepmann over 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