Uniforms: Problem with field focus inside modal of ant-design

[thearabbit]

componentDidMount() {
        this.balanceRef.focus();
    }
------
 <AutoField
                        name="balance"
                        inputRef={(ref) => {
                            this.balanceRef = ref
                        }}
 />

Get error

Uncaught TypeError: this.balanceRef.focus is not a function
    at OrderPayment.componentDidMount

[janowsiany]

Please share the whole example with both schema and OrderPayment component. My first guess is that OrderPayment is a functional component which does not have an instance.

[thearabbit]

Oh I use this form in Antd Modal like this

<Modal
      title="Payment"
      key={this.state.modalKey}
      visible={this.state.visibleModal}
      onCancel={this.handleModalCancel}
       footer={null}
>
        <OrderPayment order={order} handleModalCancel={this.handleModalCancel}  />
</Modal>
--------------
export default class OrderPayment extends Component {
    componentDidMount() {
        this.balanceRef.focus();
    };

   render(){
      return(
        ..........
        <AutoField name="balance" inputRef={ref => this.balanceRef = ref}/>
     );
   }

[janowsiany]

Ok so generally it is a problem of ant-design package itself and its internals, especially rc-dialog from which they use their Modals. So if you take a look here they handle focus by their own and i could not find a way to prevent this or to change this behaviour.
So my suggestion is to use this solution:

componentDidMount () {
  setTimeout(() => this.balanceRef.focus(), 0)
}

Checked it myself and it is working, let me know if it does for you, so far i am closing,

[thearabbit]

very thanks 👍
but now I still have problem with #278, could you help me?