ComboBox ref not working?

[chrwei]

I've got a functional component wrapped around a formfield+tooltip+combobox like so:

Code:

export const ComboField = ({ label, name, hidden, invisible, tooltip, labelWidth, style, cboStyle, ...rest }) => {
	const cboBox = useRef(null);

	if (!style) style = {};
	if (hidden === true) {
		style["display"] = "none";
	}
	if (invisible === true) {
		style["visibility"] = "hidden";
	}

	return (
		<FormField name={name} label={label} labelWidth={labelWidth || "unset"} style={{ ...{ marginBottom: "5px", marginRight: "10px" }, ...style }}>
			<Tooltip position="left" content={tooltip}><i className={tooltip ? "fas fa-question-circle" : ""} style={{ fontSize: "14px" }} /></Tooltip>
			<ComboBox ref={cboBox} {...rest} style={cboStyle} panelStyle={{ height: 'auto', maxHeight: "200px" }} 
				onFocus={() => {
					if(!rest.editable) {
						console.log("cboBox", cboBox)
						cboBox.openPanel()
					}
				} }
			/>
		</FormField>
	);
}

I'm trying to make it so when you tab into any non-editable combobox that it auto opens the panel. 

my console log is "cboBox {current: null}".  what should I be doing different?

the main reason I want to do this is because there's no focus indication on the box when the form validation has an error state, and the only keyboard input that show any response are the up and down arrow. the standard html select will select an item when its first letter is pressed.  it would be great if this behavior could be added as users are familiar with it.

[jarry]

You should use the 'current' to access the component object.

Code:

<ComboBox ref={cboBox} {...rest} style={cboStyle} panelStyle={{ height: 'auto', maxHeight: "200px" }}
  onFocus={() => {
    if (!rest.editable) {
      console.log("cboBox", cboBox)
      cboBox.current.openPanel()
    }
  }}
/>

[chrwei]

however, "console.log("cboBox", cboBox)" outputs "cboBox {current: null}" so that still doesn't work.

[chrwei]

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?

[jarry]

Please look at this code. It works well.

Code:

import React, { useRef } from 'react';
import { Form, FormField, TextBox, ComboBox, Tooltip } from 'rc-easyui';

export const ComboField = ({ label, name, hidden, invisible, tooltip, labelWidth, style, cboStyle, ...rest }) => {
  const cboBox = useRef(null);

  if (!style) style = {};
  if (hidden === true) {
    style["display"] = "none";
  }
  if (invisible === true) {
    style["visibility"] = "hidden";
  }

  return (
    <FormField name={name} label={label} labelWidth={labelWidth || "unset"} style={{ ...{ marginBottom: "5px", marginRight: "10px" }, ...style }}>
      <Tooltip position="left" content={tooltip}><i className={tooltip ? "fas fa-question-circle" : ""} style={{ fontSize: "14px" }} /></Tooltip>
      <ComboBox ref={cboBox} {...rest} style={cboStyle} panelStyle={{ height: 'auto', maxHeight: "200px" }}
        onFocus={() => {
          if (!rest.editable) {
            console.log("cboBox", cboBox)
            cboBox.current.openPanel()
          }
        }}
      />
    </FormField>
  );
}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      user: {
        name: null,
        hero: null
      },
      heroes: [
        { value: 11, text: "Mr. Nice" },
        { value: 12, text: "Narco" },
        { value: 13, text: "Bombasto" },
        { value: 14, text: "Celeritas" },
        { value: 15, text: "Magneta" },
        { value: 16, text: "RubberMan" },
        { value: 17, text: "Dynama" },
        { value: 18, text: "Dr IQ" },
        { value: 19, text: "Magma" },
        { value: 20, text: "Tornado" }
      ]
    }
  }
  render() {
    const { user, heroes } = this.state;
    return (
      <div>
        <h2>Basic Form</h2>
        <Form
          style={{ maxWidth: 500 }}
          model={user}
          labelWidth={120}
          labelAlign="right"
        >
          <FormField name="name" label="Name:">
            <TextBox></TextBox>
          </FormField>
          <ComboField label="Select a hero:" name="hero" labelWidth={120} data={heroes}></ComboField>
        </Form>
      </div>
    );
  }
}

export default App;

[chrwei]

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.

[chrwei]

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

[chrwei]

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.

[jarry]

Please show a simple example to demonstrate your issue.

[chrwei]

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.

[jarry]

This issue has been fixed. Please update to the latest version.

[chrwei]

perfect, thanks!