在溢出的React-Select Multi-select输入中滚动到底部

Question

I am using React-Select v2.4.4. I was trying various things for bringing scrollbar at bottom of multi-select input but none of them seems to work.

Sandbox Link: https://codesandbox.io/s/react-codesandboxer-example-89cry

In above link, when we select Select All option from drop down, scrollbar should automatically move to bottom and show below inputs:

I have tried 2 things but none of them is working.

1. I tried using Ref and below code:

    const scrollHeight = this.node.scrollHeight; const height = this.node.clientHeight; const maxScrollTop = scrollHeight - height; this.node.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0; 

2. Got element by using document.getElementById() , and then used scrollIntoView .

    const element = document.getElementById("select"); element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); 

Both of above methods are present in scrollToBottom function.

Is there something i am missing or doing wrong.

Answer 1

Your first approach can´t work because ref on the Select component is the component itself, not a DOM element.

The second approach can´t work either because the element with the id select (in your case) is not the element which has the overflow.

---

Thanks to the classNamePrefix prop you can easily access the DOM element of the ValueContainer component, which contains all the selected options and therefore has the overflow.

classNamePrefix

If provided, all inner components will be given a prefixed className attribute.

This is useful when styling via CSS classes instead of the Styles API approach.

--- react-select documentation

Just get the element with the id == "select" and find in it the element with the css-class react-select__value-container . You can then manipulate the scroll values on that element to scroll to the bottom.

scrollToBottom = () => {
    // element with `id` from `id` prop
    const container = document.getElementById('select');

    // `classNamePrefix` + component name
    const valueContainer = container.querySelector('.react-select__value-container');

    // Set scroll to maximum
    valueContainer.scrollTop = valueContainer.scrollHeight;
}

Answer 2

I solved it without using any scrollHeight or document.getElementById .

I did passed a ref to Select .

ref={component => {
          this.node = component;
    }}

and then i used this.node.blur() to bring the focus out of Input and then this.node.focus() to again bring focus to it. This way, when focus is brought back to Input , scroll will automatically move to bottom.

Updated code is in same code sandbox: https://codesandbox.io/s/react-codesandboxer-example-89cry

You can try by giving following input:

1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100

and then press tab or enter . You will notice that scrollbar is at bottom of Input .