After more testing this has additional issues.
click the drop down arrow for one box, then click the drop down arrow for the other box, now use your keyboard up and down arrow keys and the first box is what is active.
import React, { useRef, useState } from 'react';
import './App.css';
import { Form, FormField, ComboBox } from 'rc-easyui';
function App() {
const messager = useRef();
const [model, setModel] = useState({
Box1:0,
Box2:2
});
return (
<div className="App">
<Form
errorType="tooltip"
model={model}
labelWidth={120}
labelAlign="right"
>
<FormField name="Box1" label="Box 1:" style={{float:"left"}}>
<ComboBox value={model.Box1} tabIndex={1} editable={false}
data={[
{ value: 0, text: "Item 0" },
{ value: 1, text: "Item 1" },
{ value: 2, text: "Item 2" },
]}
/>
</FormField>
<FormField name="Box2" label="Box 2:" style={{float:"left"}}>
<ComboBox value={model.Box2} tabIndex={2} editable={false}
data={[
{ value: 0, text: "Item 0" },
{ value: 1, text: "Item 1" },
{ value: 2, text: "Item 2" },
]}
/>
</FormField>
</Form>
</div>
);
}
export default App;
add this to your App.css and it'll highlight (literally) the issue
.form-field-focused {
box-shadow: 0px 0px 3px 2px #eae885;
background-color: #eae885;
}