React-Select cannot customize

I added react-select to my app. The select field seems to be working but has many weird things going on which cant seem to be able to customize off.

This related code, I create a react-select menu which is filled up with country names.

case 'select': {            

        const options = useMemo(() => countryList().getData(), [])                     

        element =
            <div className="livetods-modal-orderinfo-row" key={'field_' + index} style={{display: 'inline'}}>
                <label className={"livetods-label " + (field[1]['required'] == true ? "required" : "")}>
                    <strong>{getField(field, 'placeholder')}</strong>
                </label>

                <Select
                    id={'field - ' + index}
                    options={options}
                    className={"livetods-modal-orderinfo-input-field"}
                    maxMenuHeight='200px'
                />
                           
            </div>
        break;
    }

This is what is result and issues I have:

Here I see list is there, next I click on it

Now when clicked I get screen full of countries. I want this to be reduced maybe to 4 countries visible at any time. I tried to change maxheight but does not work.

Scrolling while mouse is on list does not work. I can scroll list when cursor is not on list, but why not when cursor is on list?
When I do manage to scroll to top of list it is showing me information I do not wish to see. I only want the box to be filled with selected value or nothing. When I hover mouse over countries I get this bunch of info text that Ive not seen anywhere else.

I also tried to use styles={customStyles} prop to Select but it had no effect. No style changed. I am using a couple custom ClassNames which style these elements to go with rest of the app. Just in case I tried to remove these stylings and see if they affect the above issues. They dont. I cant seem to customize select box

React-Select cannot customize

0 Answers