CheckBox and LinkButton inside a FormField component do not add the form-field-focused class to the parent div like other components do.

tabindex seems to be ignored on linkbutton, the order skips it and them comes back to it after all the tabIndex specified controls are tabbed through.

there is also no focus indication on the buttons.

Code:

import React, { useState } from 'react';
import './App.css';
import { LinkButton, Form, FormField, TextBox } from 'rc-easyui';

function App() {
	const [model, setModel] = useState({
		times: 0,
		myBox:"some text"
	});

	function handleClick() {
		setModel({times: model.times+1, myBox:"clicked " + (model.times+1)})
	}

	return (
		<div className="App">
			<Form 
				errorType="tooltip" 
				model={model}
				labelWidth={120}
				labelAlign="right"
			>
				<FormField name="myBox" label="Box:">
					<TextBox value={model.myBox} tabIndex={1} />
				</FormField>
				<FormField >
					<LinkButton onClick={handleClick} tabIndex={2}>tab to here and press enter</LinkButton>
				</FormField>
				<FormField name="myBox2" label="Box2:">
					<TextBox value={model.myBox2} tabIndex={3} />
				</FormField>
			</Form>
		</div>
	);
}

export default App;

test code, using the stock material theme if that matters:

Code:

import React, { useRef, useState } from 'react';
import './App.css';
import { CheckBox, Form, FormField, TextBox } from 'rc-easyui';

function App() {
	const [model, setModel] = useState({
		myBox:"some text"
	});

	return (
		<div className="App">
			<Form 
				errorType="tooltip" 
				model={model}
				labelWidth={120}
				labelAlign="right"
			>
				<FormField name="myBox" label="Box:">
					<TextBox value={model.myBox} tabIndex={1}/>
				</FormField>
				<FormField name="myCheck" label="Check me:" labelPosition="after">
					<CheckBox tabIndex={2} checked={model.myCheck} />
				</FormField>
			</Form>
		</div>
	);
}

export default App;

without tabIndex, the checkbox gets focus but there is no indication that it has focus.  pressing space bar does toggle the checkbox as expected.

with tabIndex, the checkbox gets a little highlight when it has focus, but pressing spacebar does nothing.

if it can get the highlight AND space bar toggle no matter if tabIndex is set that would be perfect.

perfect, thanks!

Code:

import React, { useRef, useState } from 'react';
import './App.css';
import { Form, FormField, TextBox } from 'rc-easyui';

function App() {
	const refBox = useRef(null);
	const [model, setModel] = useState({
		myBox:"some text"
	});

	return (
		<div className="App">
			<Form 
				errorType="tooltip" 
				model={model}
				labelWidth={120}
				labelAlign="right"
			>
				<FormField name="myBox" label="Box">
					<TextBox ref={ref => {
						console.log("TextBox", ref)
						refBox.current = ref
					}}  value={model.myBox} />
				</FormField>
			</Form>
		</div>
	);
}

export default App;

the "TextBox" console log never appears.  remove 'errorType="tooltip" 'and it appears.  this affect combobox too, and likely all comments based on InputBase under a form.

this affects textbox too

Code:

<Form errorType="tooltip">
    <FormField name="myBox" label="Box">
        <TextBox ref={ref => {
            console.log("TextBox", name, ref)
            refBox.current = ref
        } } />
    </FormField>
</Form>

it doesn't even console.log, at all.

that works for the checkbox but not the button.

is there a key that toggles the checkbox, like the standard HTML checkbox the spacebar will toggle it.  this doesn't seem to work

LinkButton also doesn't have tabIndex

or at least it doesn't work, and isn't i the docs.

oversight or intentional?

add errorType="tooltip" to the Form and the refs will stop working.

I'd like to have a blank item as a way for a user deselect.  the issue is, at least in chrome, that the computed height is zero, at least in Chrome.  the line-height property is still set at 20px, but chrome seems to be ignoring it.

any suggestions on working around that?

ended up being a whitespace issue.  thanks.

that does work for me, and mine works when I pull it out as a minimal example.

it's not working when combined with all my other crap.

where does the k1 come from?  it's not from my code.  that's the only difference I can see.

well, I'm at a loss.  I pulled my component out to a test app and it's not null, and does drop.  in my app it's still null and not working.  I'm using the component exactly as it is in my app, copy/pasted.

the only difference is something I see in the chrome react-devtools, in the one that works the component inspector shows like

Code:

ComboField
 . t
  . Context.Consumer
     t
   . t key=".0"
   . t key=".1"

.0 is my tooltip  and .1 is the dropdown

in the one that doesn't work it's like

Code:

ComboField
 . t
  . Context.Consumer
     t
   . t key=".0"
    . t key="k1"
   . t key=".1"
    . t key="k1"

the k1 items are my tooltop and drop down.

I've tried reproducing my system with just a combo field and I cannot get the k1's to show up there.  the only thing I haven't put in is the ApolloProvider, that really shouldn't affect this, should it?

I've got an issue where for various reasons my ComboBox value is getting set before the data object is populated.  once the object is set, the displayed value does not update.

is that something the ComboBox should be handling, or do I need to do something different to make sure the value isn't set until the object is populated?