Restore Standard Select Controls

[ZachAlanMueller]

Vanilla HTML Selects standard controls allow for arrow keys up/down to select the previous/next option, and then when a user tabs, it keeps that selected option. This commit implements that functionality into rc-select.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#technical_summary

This functionality has been asked for by the community for Ant Design over the years, see issue here:
closeant-design/ant-design#26876

Please forgive me if I've done this PR incorrectly, I'm unfamiliar with the procedure, and if I did anything wrong, please let me know so that I can do better next time.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
select	❌ Failed (Inspect)			Aug 14, 2023 4:00pm

[yoyo837]

Please add some test case for it.

[ZachAlanMueller]

Thank you for your feedback. I understand that you would like me to add some test cases for the new feature. I apologize for not knowing how to do this, as I am still new to unit testing.

I would like to learn how to add test cases, so that I can be more helpful in the future. Would you be able to provide me with some resources or training on unit testing?

[yoyo837]

FYI:
https://github.com/react-component/select/blob/master/tests/OptionList.test.tsx
https://jestjs.io/

[sixwinds]

I have a temp fall back implementation, the idea is that find the active option dom node when blur:

// libsimport{useRef}from'react';import{Select}from'antd';// utilsimportisFunctionfrom'@/utils/isFunction';// this func is based on antd version 4, you can customized it on your antd versionconstgetActiveOpitonContentElement=(rootElement)=>{if(rootElement){constactiveOptionElement=rootElement.getElementsByClassName('ant-select-item-option-active',)?.[0];if(activeOptionElement){constoptionContentElement=activeOptionElement.getElementsByClassName('ant-select-item-option-content',)?.[0];returnoptionContentElement;}}returnvoid0;};constMySelect=(props)=>{const{
options,
optionFilterProp,
dropdownRender,
onBlur,
onChange,
...restProps}=props;constdropdownWrapperElementRef=useRef();return(<Select{...restProps}onChange={onChange}optionFilterProp={optionFilterProp}options={options}dropdownRender={(originNode)=>{if(isFunction(dropdownRender)){return(<divref={dropdownWrapperElementRef}>{dropdownRender(originNode)}</div>)}return(<divref={dropdownWrapperElementRef}>{originNode}</div>);}}onBlur={(...args)=>{// ---- [implementation of tabbing to select active option] start -----constactiveOptionContentElement=getActiveOpitonContentElement(dropdownWrapperElementRef.current,);if(activeOptionContentElement&&Array.isArray(options)&&options.length>0){constactiveOption=options.find((el)=>{return(el[optionFilterProp??'value']===activeOptionContentElement.innerText);});if(activeOption&&isFunction(onChange)){onChange(activeOption.value);}}// ---- [implementation of tabbing to select active option] end -----if(isFunction(onBlur)){onBlur(...args);}}}/>);};

It is based on antd version 4, but I think developer can customized the implementation.