fixes #4274

Closes #4274

Merge request !3094

resources/assets/stylesheets/scss/sidebar.scss

@@ -313,6 +313,7 @@ select.sidebar-selectlist {
                     flex: 1;
                     padding: .25em .5em;
                     width: 100%;
+                    order: 1;
                 }
 
                 .submit-search {
@@ -324,17 +325,22 @@ select.sidebar-selectlist {
                     cursor: pointer;
                     font: 0/0 a;
                     text-shadow: none;
+                    order: 3;
                 }
 
                 .reset-search {
-                    background-color: transparent;
-                    border: 1px solid var(--dark-gray-color-30);
-                    border-left: 0;
-                    border-right: 0;
+                    background: unset;
                     display: inline-block;
-                    padding-right: 5px;
-                    padding-top: 4px;
                     cursor: pointer;
+                    order: 2;
+                    height: 100%;
+                    box-sizing: border-box;
+                    margin-right: 2px;
+                    margin-left: -22px;
+
+                    img {
+                        padding-top: 4px;
+                    }
                 }
 
             }

templates/sidebar/search-widget.php

@@ -24,25 +24,24 @@
                        <? if ($needle['placeholder']) printf('placeholder="%s"', htmlReady($needle['label'])); ?>
                        <?= arrayToHtmlAttributes($needle['attributes']) ?>>
                 <? endif; ?>
-                <? if ($reset_link): ?>
-                    <? if ($onsubmit) : ?>
-                        <?= Icon::create('decline')->asInput([
-                            'title' =>  _('Suche zurücksetzen'),
-                            'class' => 'reset-search',
-                            'onclick' => "window.document.getElementById('needle-".$hash."').value = '';"
-                        ]) ?>
-                    <? else : ?>
-                        <a class="reset-search" href="<?= $reset_link ?>" tabindex="0" role="button"
-                            <?= $onsubmit ? 'onclick="'."window.document.getElementById('needle-".$hash."').value = ''; window.document.getElementById('".$id."').submit(); return false; ".'"' : '' ?>
-                           title="<?= _('Suche zurücksetzen') ?>">
-                            <?= Icon::create('decline')->asImg(20) ?>
-                        </a>
-                    <? endif ?>
-                <? endif; ?>
                 <button type="submit" class="submit-search<?= $reset_link ? ' is-executed' : '' ?>"
                         title="<?= _('Suche ausführen') ?>">
                     <?= Icon::create('search')->asImg(20) ?>
                 </button>
+            <? if ($reset_link): ?>
+                <? if ($onsubmit) : ?>
+                    <?= Icon::create('decline')->asInput([
+                        'title' =>  _('Suche zurücksetzen'),
+                        'class' => 'reset-search',
+                        'onclick' => "document.getElementById('needle-".$hash."').value = ''; this.remove();"
+                    ]) ?>
+                <? else : ?>
+                    <a class="reset-search" href="<?= $reset_link ?>" tabindex="0" role="button"
+                       title="<?= _('Suche zurücksetzen') ?>">
+                        <?= Icon::create('decline')->asImg(20) ?>
+                    </a>
+                <? endif ?>
+            <? endif; ?>
         </li>
     <? endforeach; ?>
     </ul>