Shift the input's focus after altering the select option using Element UI and Vue.js

When choosing a product from the selection menu, be sure to click on the desired product and then focus on the quantity input field. If you are having trouble using the ref attribute, check out the following link for more information:


    <el-select
        ref="select1"
        v-model="EntradaProducto.ProductoSucursalId"
        filterable
        style="width: 50%"
        remote
        @change="ChangueSelectProduct"
        placeholder="Type in the name of the product"
        :remote-method="remoteMethodSearchProduct"
        :loading="loadingSearchProduct">
          <el-option
              v-for="item in optionsProducts"
              :key="item.id"
              :label="item.descripcion"
              :value="item.id">
            <span style="float: left">{{ item.marca +' | '+ item.descripcion }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">S/ {{ item.precio }}</span>
          </el-option>
    </el-select>

    <el-input
        ref="cantidad1"
        type="number"
        style="width: 90px"
        placeholder="Qty"
        v-model="EntradaProducto.Cantidad"
    ></el-input>

// methods


  ChangueSelectProduct(){       
     this.$refs.cantidad1.select();
     this.$refs.cantidad1.focus();  
  },

Answer №1

If you find yourself needing to make changes to the user interface in a way that is outside of Vue, a useful tip is to utilize the nextTick function. This approach would delay the call to focus until after the UI has completed updating following the selection.

UpdateSelectedProduct() {
  this.$nextTick(() => this.$refs.quantity.focus())
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using *ngFor index value results in an error message saying "The call stack size has reached its maximum limit."

Check out this StackBlitz demo I have a simple view where I'm looping over HTML using Angular's *ngFor directive. To show more or less content, I'm using the ngx-bootstrap collapse component. The problem is that when I collapse one button, ...

Copying a Pinia state Array without referencing it is not possible

My goal is to duplicate an array within a Pinia store so that I can use it to create a reactive object in various components for input modeling. The intention is to only update the original array if the user decides to save any changes made using the copy ...

Is it possible to efficiently iterate through map keys in axios using Vue.js?

Currently, I am working on Vue.js exercises that I have created. I am successfully populating a table with data from a JSON API, but I have encountered a challenge. The API contains multiple keys with similar names (strIngredient1, strIngredient2, strIngre ...

One way to enhance user experience is by passing parameters dynamically from the database when an element is clicked. This allows for the retrieval of

Earlier, I tried to post a question but couldn't get it working due to incorrect code. As the title suggests, my objective is to retrieve data from a database and display it in a div. The idea is that when this data is clicked, it should be passed to ...

JQuery implementation of Axis webservice call

Trying to invoke my Axis webservice with the code below var wsUrl = "http://localhost:8080/TestServ/services/TestCls?wsdl"; var soapreq = "<soapenv:Envelope xmlns:soapenv=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:cod=\"http:// ...

Achieving the display of data in the same iframe with two drop down menus

I need help with my dropdown menus that are pulling data from queries displayed in an iframe. Currently, clicking on both menus creates two iframes and displays the data in both of them. How can I configure it so that only one iframe is created and share ...

Step-by-step guide to swapping an element with a textarea element using javascript

My current project involves creating a user profile that includes a text box where users can describe themselves. I've already implemented a separate page for editing the profile, but now I want to add a feature where users can hover over their descri ...

Verifying if a value is an integer using Javascript/jQuery

Here is some JavaScript code that I have: var updateAmount = function (amount, rate) { if (rate > 0 && amount.length > 0 && !isNaN(amount) && amount > 0) { amount = Math.round(rate * amount * 100) / 100; // mul ...

Ways to modify Angular pipe without specifying data types

I am in the process of extracting an Angular pipe from an application to a library. The current pipe is tied to specific types, but I want to change it to use generic types while maintaining type safety. Original Pipe: import { Pipe, PipeTransform } fr ...

Communication through HTTP requests is not supported between docker containers

I currently have two applications running as services within a docker-compose environment. My React App A Node.js server In an attempt to make an HTTP request from my React app to the Node.js server, I am using: fetch("http://backend:4000/") However, w ...

Save a collection of controller instances within a separate controller in AngularJS

I am in need of an angular example where one controller wraps another. For instance, I am looking to divide some logic between EndpointListController and EndpointController. EndpointListController will handle retrieving data from storage, along with funct ...

The beautiful synergy between Vuetify's v-input component and overflow animation

I am having trouble implementing an overflow animation on vuetify's v-text-field component. Despite my efforts, I can't seem to make it work as intended: <script setup> const text = 'very long long long long long text' </scri ...

Even with CORS enabled, the dreaded cross-origin error persists

I've been attempting to access a node route in Angular using the $http method and the cors module. I've tried implementing a basic app.use(cors()); but the error persists. I also followed guidelines from the cors documentation by creating a whi ...

Encountering installation issues with react-navigation-header-buttons

I previously had an outdated version installed, but now I am looking to upgrade to version 8. However, I am facing errors that I don't know how to resolve. Here are the errors I am currently encountering: npm ERR! code ERESOLVE npm ERR! ERESOL ...

Tips for determining the number of columns in a multi-column web layout using webkit

Having some static HTML content that needs to be formatted using multiple columns, which are presented as pages to the user. The method used is quite simple: bodyID = document.getElementsByTagName('body')[0]; bodyID.style.width = desiredWidth; t ...

Tips for contacting the giveaway host after the giveaway has finished

I am currently utilizing the Discord Giveaways module. I am interested in learning how to send a direct message to the host of the giveaway once it has ended. I haven't quite figured out how to do that yet. Here is what I have gathered so far: manag ...

Incorporate an icon next to the thumb in Vuetifyjs Tick Slider

I am in search of a suitable icon to add, whether it's an SVG Icon or Fontawesome, I have no preference. Below is the code I am using in vuetifyjs: <v-slider v-model="value" :tick-labels="ticksLabels1" class="step-slider" ...

The parameters passed in an axios get request are not carried over to a create request

Exploring the capabilities of the YouTube API with ReactJS While working with the YouTube API, I came across the create method in axios. However, I faced an issue where the params were getting overwritten. What am I missing here? I have a file named yout ...

Ensure users follow step-by-step journey in Vue Material's steppers and connect each step to a designated path

I'm just starting out with web development and I have a question. I want to design a stepper with 5 tabs that restricts navigation - for example, you can't proceed to step 3 without completing step 2, and so on. If a user is on step 4 but wants t ...

Retrieve Unformatted Text with CKEditor5

I am familiar with how to retrieve data using the CKEditor5 API as outlined in the documentation and on another discussion post on StackOverflow. However, I am encountering difficulties when attempting to retrieve plain text from the editor. The code I ha ...