Deferred computed property fails to recognize the final character entered into the input field

I am facing an issue with my automated tests using selenium.

The problem lies with a particular input field in a web form:

<input data-bind="value: searchText, valueUpdate: 'afterkeydown'"></input>

Here is the model associated with this input field:

this.searchText = ko.observable('');
this.invert = ko.observable(false);
this.defferedSearchFilter = ko.pureComputed(function() {
    return {
        text: this.searchText(),
        invert: this.invert()
    }
}, this).extend({ rateLimit: { timeout: params.throttleInterval || 500, method: 'notifyWhenChangesStop' } });

The list is filtered based on the value in the defferedSearchFilter variable. The autotest verifies this filter using the following algorithm:

  1. Enter value %95% in the input field
  2. Wait for filtration
  3. Check items in the list by clicking on them, as some information is hidden within the items.

However, occasionally (less than 1% of the time), the computed field fires twice because it does not detect the last entered symbol. For instance, logs collected from selenium and chrome confirm this:

Selenium: [2017-07-17 15:41:31,224] (DEBUG) Fill By.CssSelector: .col3 .entityContent #linkListFastSearch_0, value to input: %95% - success

At this point, selenium takes a screenshot. The value in the input is %95%

Chrome: [5624:5680:0717/154131.625:INFO:CONSOLE(42)] "FastSearch id = 4 changed. New text = "%95"", source: http://localhost/WebUI/Scripts/uicontrols/basic/fastsearch.js (42)

After filtration, selenium clicks on an item. Selenium: [2017-07-17 15:41:34,686] (DEBUG) Click By.CssSelector: [id='linkTargetCode_95'] - success

And after the throttle interval, the computed field changes to the correct value. Chrome: [5624:5680:0717/154134.802:INFO:CONSOLE(42)] "FastSearch id = 4 changed. New text = "%95%"", source: http://localhost/WebUI/Scripts/uicontrols/basic/fastsearch.js (42)

Has anyone else experienced a similar issue?

javascriptgoogle-chromeseleniumknockout.js

Answer №1

Consider implementing the textInput feature for seamless updates. By using the textInput binding, you can connect a text box or text area with a viewmodel property, allowing for bidirectional updates between the property and the element’s value.

Unlike the value binding, textInput offers real-time updates from the DOM for various types of user input, such as autocomplete, drag-and-drop, and clipboard events.

<input data-bind="textInput: searchText" />

Web browsers differ in their response to unconventional text entry methods like cutting, dragging, or accepting autocomplete suggestions. The value binding, even with additional options like valueUpdate: afterkeydown for specific events, may not cover all text input scenarios across different browsers.

The textInput binding is tailored to address a wide array of browser inconsistencies, ensuring uniform and immediate model updates despite atypical text entry techniques.

Explore more about textInput binding here.

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

Remove outdated choices from subcategory menu upon JSON data retrieval

By using the onchange event in the parent dropdown (first dropdown), I am populating the child dropdown (second dropdown). Subsequently, upon selecting an option from the child dropdown, I automatically fill in three text boxes. However, I am facing an iss ...

javascriptjqueryajaxjsonjsp

Trouble with the 'uppercase' package in Node.js: Receiving ERR_REQUIRE_ESM error while utilizing the require() function

I am encountering a problem with the 'upper-case' module while developing my Node.js application. My intention is to utilize the upper-case module to convert a string to uppercase, but I'm running into difficulties involving ESM and require( ...

javascriptnode.jsnpmuppercase

When working with AngularJS, I encountered an issue where I added two additional input text boxes with unique IDs and ng-models, but unfortunately

After countless modifications to a form, I am puzzled as to why two additional fields are not being sent this time. Controller vm.question = {}; Although most of the time these fields will be empty, I have never encountered an issue with sending blank f ...

javascriptangularjsjsonangularjs-ng-formangularjs-model

Utilize the cube function in JavaScript to zoom in on the cube automatically when the page loads

I have the code below. When the page loads, I would like the cube to zoom out and stop. I am new to 3js and have no idea how to achieve this. I want the cube to start small and then grow into a larger cube before stopping. <script> //var re ...

javascriptthree.js

Setting a radio button dynamically based on JSON data by using a select dropdown option

I am looking to generate questions from a pre-selected list using Vue.js. I have successfully implemented this with a radio button that reveals a new set of questions once checked. Now, I want to achieve the same functionality using a dropdown selection. ...

javascriptjsonvue.js

Transform objects into arrays

Is there a way to transform an object into an array of objects while adding new keys and values? This is my current object: { "0": "Ann_B", "1": "Billy_P", "2": "Carly_C", "3": "David_L" } I would like it to look like this: [ { "value": "Ann_B ...

javascriptarraysreactjsobject

What could be causing my AJAX code to fail in retrieving information from an API?

Hey everyone, I'm new here and hoping to get some help with an issue I'm facing. I've written a code to fetch data from an API and display it on my HTML page, but for some reason the AJAX code isn't working. There's nothing showing ...

javascriptajaxasp.net-web-api

Retrieving parameters from a class that is handed over from the constructor to a function by leveraging the rest parameter feature

I am encountering an issue where the Method is not reading the values in the arguments, despite my attempts to pass each argument through the constructor into the method for encryption. Could someone please point out what I might be doing wrong? class A ...

javascriptrestclassfor-loopconstructor

Tips on skipping the need to repeatedly use `@ApiProperty()` for every dto in NestJs-swagger

I'm currently exploring ways to streamline the process of specifying @ApiProperty() for each DTO. I've heard about a method involving the creation of a nest-cli.json file, where if you define Promise<DTO> in your controller within nest-swa ...

javascripttypescriptswaggernestjsnestjs-swagger

I was surprised by how Await behaved in if-else statements, it was not what

let metadata = []; allNFTs.map(async (e) => { if (e.metadata) { metadata.push(JSON.parse(e.metadata).attributes); } else { let config = { method: "get", url: `http://localhost:3000/api/fetch ...

javascriptnode.jsreactjsaxiosnext.js

NuxtJs login feature is functional, but encounters an unauthorized 401 error

I am utilizing the NuxtJs auth module to manage my authorization within the application state. I have created an express API specifically for this purpose, and it functions correctly. Below is the configuration included in my nuxt.config.js file: axios ...

javascriptexpressnuxt.js

Unable to access elements in shadow DOM using Selenium in Python

I'm encountering difficulties trying to access elements in a dropdown list using selenium. The values I need to input into the "Business Group" dropdown list are located within a shadow-root, making it impossible for me to reach any of them. The spe ...

python-3.xseleniumshadow-root

As two divs glide across the screen, the top div remains hidden from view

To enhance our user experience, we are tasked with creating a captivating screen saver featuring 3 images. The bottom image will remain fixed in its position. The middle image should move across the screen. Lastly, the top image will move at a faster ...

javascriptcsshtml

Unable to get Express router post function to properly function

Issue: var express = require('express'); var router = express.Router(); Route.js: Setting up Post route router.route('/signup') .post(function (req, res) { console.log('post signup called', req.body); re ...

javascriptnode.jsexpress

Tips for utilizing the @Input directive within the <router-outlet></router-outlet> component

I am new to Angular 4 and recently discovered that in Angular, data can be passed from a parent component to a child component using @Input like this: <child [dataToPass]="test"></child> My question is, how can I achieve the same functionalit ...

javascriptangular

Components can be iterated over without the use of arrays

In my component, I have a render that generates multiple components and I need some of them to be repeated. The issue I am facing is that when I create an HTML render, the variable is not being processed and it just displays as text. Although the actual c ...

javascriptreactjsloopsjsx

Discover the method to activate the back button feature on ajax pages

I am currently working on a website that is navigated in the following way: $(document).ready(function () { if (!$('#ajax').length) { // Checking if index.html has been loaded. If not, navigate to index.html and load the hash part with ajax. ...

javascriptjqueryajaxbrowser-historyhtml5-history

Does the browser detect the HTML version of the document?

I discovered that my HTML 4 document successfully utilized the required attribute from HTML 5, displaying a red error border when an input was left empty. It seems like the browser interpreted the document as HTML 5 and disregarded the DOCTYPE declaration. ...

htmlgoogle-chromehtml4

Using Jquery and Ajax to pass an extra PHP variable to a server-side script

I am working with a dropdown select box where the selected option is sent to a server-side script using Ajax. <select id="main_select"> <option selected="selected" value="50">50</option> <option ...

javascriptphpjqueryajax

What steps can I take to streamline this code and enhance its elegance in writing?

Working on some practice problems involving higher-order functions, I managed to solve this particular problem. However, the code I used feels somewhat messy and not as elegant as it could be. Is there a better way to combine map and reduce for a cleaner s ...

javascriptfunctionreducehigher-order-functionsmap-function