Auto-select in Search field

cokajane

Currrently, if the search field is on the address bar, text is automatically selected when it gets focus (same as address field). I have 'Show as a Button' selected in Search settings. When the search field gets focus (under the addressbar), previously typed text is not selected.

Is there a mod to make this floating search field automatically select the contents, as it does when it is fixed on the address bar?

I have spent hours searching the internet and this forum, and experimenting with CSS, and have been unsuccessful. I would be grateful if someone could come up with a solution.

nomadic

@cokajane This can't be done with CSS. You will have to try Javascript to get this working. I am busy these next few days, but if someone else wants to give it a go. Here are some resources:

How to select text in an input: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

How to check for focusing of the input: https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event

Might need a mutation observer as well if the input isn't always there: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

cokajane

@nomadic Thanks for looking into this. Your suggestions look a little too complicated for me, however. I'm more comfortable with CSS than I am with Javascript. I may try submitting a feature request. I do believe the behavior should be the same, weather the search box is on the address bar or not.

A Former User

@cokajane said in Auto-select in Search field:

I may try submitting a feature request. I do believe the behavior should be the same, weather the search box is on the address bar or not

I think this sound more like a bug report than a feature request

Bisquick

@cokajane So I usually have the search field as a separate field on the address bar but I changed it to the floating search to see if I might be able to figure this out with my limited knowledge (the 'user-select' css property came to mind) but weirdly it does select prior text for me, even in the floating button version.

cokajane

@Bisquick Thanks for looking into this. Apparently, my CSS knowledge is more limited than yours. Could you please post the CSS that makes this work? Thanks.

A Former User

@Bisquick @cokajane I don’t think this is possible with CSS. user-select (dis)allows the user to select text/objects, but doesn’t change the actual selection.

cokajane

@potmeklecbohdan Thanks. I have previously reported this as a bug, VB-69053.

luetage

The selection is on the searchengine-select icon, press TAB once to get the focus on the input.

Anyway, here a javascript solution:

var appendChild = Element.prototype.appendChild;
Element.prototype.appendChild = function () {
    if (arguments[0].tagName === 'INPUT' && arguments[0].classList.contains('vivaldi-searchfield')) {
        setTimeout(function() {
            const inp = document.querySelector('.searchfield-input');
            inp.focus();
            inp.select();
        }.bind(this, arguments[0]));
    }
    return appendChild.apply(this, arguments);
};

cokajane

@luetage When I open the searchfield popup, the input field already has focus, so TAB has no effect. But thanks for the Javascript. I just implemented it and it works great! Thanks so much!