Search and replace (in multiple files), the replacement text input box lost the scrollbar and hides the rest of the search-and-replace options/output

[jihu]

• VSCode Version: 1.48.2
• OS Version: Windows 10

I often use the search and replace feature (the one where you search for files in the whole project), and often replace content in multiple lines in one go. Earlier this caused no problem. If the search text or replacement text was long, the box just got a scrollbar. But recently (not sure exactly from what version) the replacement text box never gets a scrollbar, no matter how long the text is, and no matter if the replacement text is one long line or multiple lines. So if the replacement text is too long (I often do this with 50-100 lines) the replacement text box takes up all available space. This makes it impossible to access the rest of the configuration (like files to include), as well as the search results.

Steps to Reproduce:

1. Input a long text into the search replacement text box on the main search (not the in-editor-search). Try about 50-100 lines of regular text.
2. Notice that the other input boxes under the search replacement box, as well as the search results, are hidden and inaccessible

Does this issue occur when all extensions are disabled?: Yes

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Replace Preview in broken state after replacement is done (#85772)
• Search and Replace keep losing the selection (#39190)
• Search: find, replace input boxes miss scrollbar (#64311)
• replacing in selection (#101907)

[jihu]

I would say that ticket #64311 ("Search: find, replace input boxes miss scrollbar") is describing the same problem, but since that ticket hasn't been touched since 2018 and my problem only happened recently (say in some version released the last few months) I would say that this ticket is not a duplicate of that ticket.

[roblourens]

Can you share a screenshot so I'm clear on the issue? This works for me. It should hit a max height of like 250px and be scrollable after that (but with no scrollbar)

[jihu]

Sure thing.

Replacement with 10 lines:

Replacement with 60 lines:

Replacement with 70 lines:

[roblourens]

So strange! Are you pasting the text in or typing and inserting newlines?

[jihu]

Most of the time I paste content, but now I tried inserting newlines using Shift+Enter, and the result was the same.

[roblourens]

Are you using an IME or international keyboard?

Otherwise all I can ask is for you to try debugging it, if you are up for it.

• Help > "Toggle developer tools"
• Open the Sources tab
• ctrl+p, type "inputbox.ts" and open that file
  • You may have to wait a minute for devtools to load the sources
• Set a breakpoint at the top of the layout() method and resize the sidebar horizontally to trigger it

What should happen is that we compute some large height for the input, then reduce it based on maxHeight. It's possible that maxHeight doesn't get initialized properly or that something goes wrong inside this function. But I can't imagine what the problem is. You can also find the textarea element and see whether it has a height set on it at all.

[Simran-B]

Same problem here, the search box has a limited height and can be scrolled with the mouse wheel, but not the replace box. VSCode v1.49.0 on a German Windows 10 with standard German keyboard settings:

I set the breakpoint on line 572 and dragged the sidebar. In the local scope pane, I find the following values:

• previousHeight: undefined
• this: t.historyInputBox
  • cachedContentHeight: 654
  • cachedHeight: 134
    • element:
      • clientHeight: 134
      • offsetHeight: 136
  • maxHeight: 134
  • height: 134

Stepping through the layout code, previousHeight gets set to 654, cachedContentHeight as well (same as before). Then there is a second call to layout() where it's 600 and here:

this.cachedHeight = Math.min(this.cachedContentHeight, this.maxHeight);

maxHeight is Infinity. That doesn't seem right?

The textarea ends up with an inline style="height: 600px". If I manually change that to 134px, then it has a proper height limit and is scrollable.

[roblourens]

Thanks for checking that @Simran-B. I guess my reading comprehension is not good because I missed that this was just about the replace input, not the search input. Should be fixed now.

[Simran-B]

Thank you @roblourens, just tested the fix with insiders build 9e50567 and I can confirm that it's working as expected now.