Unble to focus autocomplete programaticly

[Sandeep G]

Hi Team,

I am facing issue in setting focus for autocomplete component.

1. added method on click to open bootstrap-vue modal
<a
      id="add-panel"
      class="add-item-panel"
      @click="showAddBarEvnt"
      v-if="formMode === 'add' || (salesOrderDetail && salesOrderDetail.DocumentStatus === 0)"
    >
      <i class="fas fa-plus-circle"></i>
    </a>
2. In below method, added infocus for the autocomplete with ref
showAddBarEvnt() {
      // check outlet is selected
      if (this.selectedOutlet) {
        this.showAddBar = true
        this.itemAddObj = { ...this.soLineItem }
        this.$refs.sideBarSearch.focusIn()
      } else {
        this.$bvToast.toast('Please select Outlet before adding item!', {
          title: `Error`,
          variant: 'danger',
          solid: true,
          autoHideDelay: 3000
        })
      }
    },
3. We can see content of modal(pop-up) below
<div class="modal-content-add">
        <div class="row pb-4">
          <div class="col">
            <div class="autocomplete">
              <ejs-autocomplete
                :dataSource="itemCodeOptions"
                :placeholder="'search product'"
                :filtering="getProducts"
                :value="itemAddObj.ItemCode"
                @change="changeSelectedProduct"
                ref="sideBarSearch"
              ></ejs-autocomplete>
            </div>
          </div>
        </div>
      </div>
4. I am getting below error
   

[Sevvandhi Nagulan]

Hi Sandeep, 

Greetings from Syncfusion support. 

We checked your query. In the code, the component instance accessed incorrectly. Please refer the following code. 

 this.$refs.sideBarSearch.ej2Instances.focusIn() 

  

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Sandeep G]

Hi Sevvandhi,

I have tried with provided solution, I still get the same error.
below line worked for another input <ejs-autocomplete ref="outletInputSearch"

this.$refs.outletInputSearch.focusIn()
-----------------------------------------------------------------

In current case, I am supposed to focus autocomplete input once modal is opened.

    <b-modal v-model="showAddBar" title="Item Details" hide-header hide-footer no-close-on-backdrop>

      <!-- Modal content -->

      <div class="modal-content-add">

        <div class="row pb-4">

          <div class="col">

            <div class="autocomplete">

              <ejs-autocomplete

                :dataSource="itemCodeOptions"

                :placeholder="'search product'"

                :filtering="getProducts"

                :value="itemAddObj.ItemCode"

                @change="changeSelectedProduct"

                ref="sideBarSearch"

              ></ejs-autocomplete>

            </div>

          </div>

current versions

[Sevvandhi Nagulan]

Hi Sandeep, 

We checked your query. The provided code works as expected at our end. Please call the focusIn method in the open event of modal.  Also make sure that, the component rendered in the page when accessing the instance of the component. Refer the below sample. 

Sample link: https://codesandbox.io/s/vue-template-forked-jul2l 

If still issue persists, kindly modify the above sample to validate the issue further at our end. 

Regards, 

Sevvandhi N