Skip to content

Fixed the searchbar on focus #743

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+30 −19
Open

Fixed the searchbar on focus #743

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ca8690
Fixed the searchbar on focus
ARYANSHAH1567 Aug 5, 2025
cbe10c7
Merge branch 'master' into aryanshah/fix_searchbar
ARYANSHAH1567 Aug 5, 2025
9877a26
Merge branch 'master' into aryanshah/fix_searchbar
vr-varad Aug 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 29 additions & 13 deletions assets/scss/_search_project.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,17 +86,11 @@
}

// Offline search

.td-search--offline {
&:focus-within {
// Don't hide the search icon on focus: this gives better UX when user
// explores content of search-results popup and focus is lost.

// Keep the search icon visible but maintain consistent styling
.td-search__icon {
display: flex;
color: $input-placeholder-color;
background-color: var(--bs-body-bg);
padding-right: 0.2rem;
}
}
}
Expand Down Expand Up @@ -142,40 +136,62 @@
.navbar-brand {
margin: 1.25rem;
}

.td-search {
display: flex;
justify-content: center;
align-content: center;
// background-color: #EBC017;
background-color: #2e2e31;
border-radius: 1rem;

.td-search__input {
width: 100%;
text-indent: 1.25em;
border-radius: 1rem;
background: transparent;
border: none;
color: inherit;
}

.td-search__input:not(:focus) {
background: transparent;
border-radius: 1rem;
}

// Make focused state identical to non-focused state
.td-search__input.form-control:focus {
color: inherit;
background: transparent !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't use !important @ARYANSHAH1567

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @vr-varad I tried for many options by removing the !important but later found that
Screenshot 2025-08-07 200435
There are some styling which are over-riding the current styles and it is being injected so its not from the code, i cant find any other option other than !important to override the injected styling

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then you have to make sure these styles are top-level and should not be overwritten by other styles. @ARYANSHAH1567

border: none !important;
color: inherit !important;
box-shadow: none !important;
outline: none !important;
border-radius: 1rem;
}

// Ensure search icon maintains consistent styling in navbar
.td-search__icon {
color: $navbar-dark-color !important;

// Override any focus-within changes for navbar specifically
.td-search--offline:focus-within & {
color: $navbar-dark-color !important;
background-color: transparent !important;
padding-right: 0 !important;
}
}
}
.td-search__input.form-control:focus {
// background-color: #EBC017;
}
}

.form-control {
border: 1px solid #ced4da;
}

input[type="search"]::-webkit-search-cancel-button {
filter: invert(55%) sepia(75%) saturate(380%) hue-rotate(135deg) brightness(95%) contrast(90%);
cursor: pointer;
transform: scale(1.1);
}

input[type="search"]::-webkit-search-cancel-button:hover {
filter: invert(60%) sepia(95%) saturate(500%) hue-rotate(140deg) brightness(100%) contrast(100%);
}
}
7 changes: 1 addition & 6 deletions layouts/partials/hotkey.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,7 @@
event.preventDefault();
focusSearchBar();
});

var searchBar = document.querySelector(".td-search__input");
if (searchBar) {
searchBar.focus();
}


var searchElement = document.querySelector(".td-search__input");
if (searchElement) {
searchElement.appendChild(searchKey);
Expand Down