when entering text the focus of input is lost

Hi, This is what I get.

My code is:

For the step:

const steps = [
    {
      selector: '#campaign_step',
      content: ({ goTo }) => (
        <div>
            <p>{i18n.leaders['Welcome to Leaders Market, start by entering the name of the campaign you\'ll be working on']}</p>
            <p>{i18n.leaders['For example: New sunglasses campaign']}</p>
            
          <button
            className="btn btn-adv-teal"
            onClick={() => goTo(1)} >
            {i18n.leaders['Next step']}
          </button>
        </div>
      ),
    //   stepInteraction:true,
      position:'right',
      action: node => {
        // by using this, focus trap is temporary disabled
        node.children[1].focus()
        console.log(node)
      },
    },
]

The Tour:

<div className="rtl">
    <Tour
            // closeWithMask={true}
            disableKeyboardNavigation={true}
            // disableInteraction={false}
            onAfterOpen={this.disableBody}
            onBeforeClose={this.enableBody}
            steps={steps}
            rounded={5}
            showNavigation={false}
            showButtons={false}
            isOpen={this.state.tourOpen}
            onRequestClose={this.closeTour} 
            />
</div>

For the input:

<div id="campaign_step">
      <h4
        className={this.state.errors.campaign_name && 'help-block-error-bold'}
      >
        {i18n.leaders['Campaign name']}
      </h4>
      <input
        id="campaign_name"
        type="text"
        tabIndex="1"
        onChange={value => {
          if (value) {
            document.getElementById('camp_name').textContent =
              value.target.value
          }
          this.setState({
            activityEdit: {
              ...this.state.activityEdit,
              name: value.target.value,
            },
          })
        }}
        onBlur={value => {
          let campaignError = value.target.value == '' ? true : false

          if (campaignError !== this.state.errors.campaign_name) {
            this.setState({
              errors: {
                ...this.state.errors,
                campaign_name: campaignError,
              },
            })
          }
        }}
        className="form-control form-control-adv adv-input-field"
        name="campaign_name"
        // placeholder={i18n.leaders['Campaign name']}
        value={this.state.activityEdit.name}
      />
    </div>

Thanks a lot!

[elrumordelaluz]

Hi @Alpa84, You are re-rendering the Component where the Tour is in, so with each state change, you are re-rendering an open Tour, and this is the reason why you are loosing focus on the input.

Try separating components like in this fork

[wsz7777]

I use disableFocusLock as true can fix this problem. #209