Close selection in Angular Bootstrap typeahead

I am trying to figure out how to close the select list when a form is submitted with a value that is not on the list, using the typeahead-focus-first feature. I started from the typeahead plunker example.

Currently, when the user hits enter and the storeItem function is triggered, the list remains open.

<form ng-submit="storeItem()">
  <input type="text"
    typeahead="state for state in states | filter:$viewValue | limitTo:8" 
    typeahead-focus-first="false"/>
</form>

The storeItem function looks like this:

$scope.storeItem = function() {
   $scope.selected = Date.now();
};

You can check out the full plunker example here

Any suggestions on how I can close the list while preserving the input value and list contents?

Answer №1

It appears that a bug has been discovered in the typeahead directive, specifically within the 'keydown' method. The code logic prevents the dropdown from closing when the enter or tab key is pressed and no selection has been made:

// if nothing is selected (such as on focusFirst) and enter/tab is pressed, do not close
if (scope.activeIdx == -1 && (evt.which === 13 || evt.which === 9)) {
  return;
}

As a result, the input element loses focus and the popup remains open without closing. It would be advisable to raise an issue on the official repository.

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

Validating Password Consistency using Javascript

I'm having trouble with validating the password fields and ensuring they match, even when both input boxes contain the same password. JavaScript var validator = $("#signupform").validate({ rules: { password: { required: true, minle ...

Performing synchronized execution in a node.js application by utilizing the 'readline' package

Struggling with the asynchronous nature of node.js, despite hours spent on callbacks and researching. I have a program that reads lines from a file using the readline module in node, passing data to async functions within the program. The goal is to proces ...

How can we avoid nesting multiple functions as callbacks in Node.js/Express applications to ensure sequential execution?

Currently, I am in the process of creating a straightforward URL shortening web application. My main objective behind this endeavor is to gain a better understanding of JavaScript, with a specific focus on Node (especially Express), and Mongo. In this web ...

How can I incorporate a second main app.js file in Node.js to improve the organization and cleanliness of my codebase?

Hello, I am currently using Node.js and the Express framework for my project. All of my server-side code is contained within my app.js file, which has become quite complex with almost 250 lines of code. Now, I need to add authentication functionality to my ...

Validating radio buttons in Ionic framework

I am currently working on implementing a form in my application using Ionic and AngularJS. I have added validation to all the fields, but I am facing an issue with the radio button validation. The error message is being displayed correctly when no radio bu ...

Customizing the Column Menu in Kendo Grid with AngularJs

My goal is to integrate the Kendo UI-Menu into the toolbar of a Kendo Grid as shown below: https://i.sstatic.net/v1KE5.png I managed to achieve this using JQuery (here's a working Fiddle, but now I need to make it work in an Angular environment. I at ...

Showing outcomes from various API requests

I have encountered an issue while making two API calls to a backend server and trying to display both responses in JSON format to the user. Strangely, alert 2 is showing as 'undefined' when I check the console, while alert 1 works perfectly fine. ...

Exploring nested JSON information through jQuery's AJAX call

I am encountering an issue with accessing JSON data using a jQuery AJAX request in JavaScript. I keep receiving a 'Cannot read property [0] of undefined' error in the console of Google Chrome. Despite trying different approaches, such as referrin ...

Verification of symmetrical file formatting

When dealing with three separate file upload inputs, the challenge is to ensure that the uploaded files are not duplicates. Additionally, if the user selects image format files (such as png, jpg, jpeg), they must select all three inputs in image format. On ...

What is the process for updating my API data with information submitted through a form?

I am encountering a challenge with my Products component that fetches data from an API endpoint. I also have a Form component where users can input data to update the Products component, displaying both fetched and new data. How can I achieve this? I passe ...

Using AJAX, FLASK, and JavaScript to send an existing array to an endpoint

Having trouble POSTing the array songFiles generated by the getTableData() function (inside an ajax request) to the /api/fileNames endpoint, and then handling it in the postFileNames() callback function. Any assistance or alternative approaches would be gr ...

Building a Modular Socket.io System using Express 4

I'm currently working on modularizing my application files, and I've encountered a challenge with the integration of Socket.io. My goal is to utilize io within my routes.js file. Here's an example of what I'm attempting: var router = r ...

Is there a way to inject custom data from a Factory or Service into a UI-Router state?

Below is an example where I have a custom data object containing roles. These roles are returned from a function within an array, but I am now looking to invoke this function from a service or factory. .state('WorkArea', { parent: 'site& ...

Add opening and closing HTML tags to enclose an already existing HTML structure

Is there a way to dynamically wrap the p tag inside a div with the class .description-wrapper using JavaScript or jQuery? This is the current html structure: <div class="coursePrerequisites"> <p> Lorem ipsum.. </p> </ ...

Design a table within an mdDialog that allows for editing of data presented in JSON format

I'm attempting to implement a dialog using JSON data. $scope.showAttributeData = function(data) { $scope.feature = data console.log($scope.feature) var that = this; var useFullScreen = ($mdMedia('sm') ...

Utilizing VUE with Socket.io or vue-socket.io Integration

I've been working on connecting using socket.io (client) and websocket.org (server) with vue.js. Despite going through all the examples, I can establish a connection to the socket but when I emit the event BOARD_ID, I don't receive any response. ...

What could be the reason for the malfunction of this AngularJS data binding feature?

I am trying to create an angularjs filter that outputs HTML, similar to what is discussed in the link, but I am encountering issues. In my HTML code, I have: <ul> <li ng-repeat="book in books | filter:query"> {{book.title}} ...

Implementing updates to a website from a database without the need for a page refresh

I am eager to delve into the world of AJAX and have identified a seemingly straightforward challenge that I believe will serve as an informative learning experience. Imagine a scenario where users are continuously adding new entries to a database table. ...

Issue with async waterfall not triggering the next callback function when combined with a promise

async.waterfall(eventIDs.map(function (eventId) { console.log(eventId); return function (lastItemResult, nextCallback) { if (!nextCallback) { nextCallback = lastItemResult; las ...

Exchange CSS Styles with a Single Click Event in JavaScript

Struggling with getting a click event to function properly on my webpage. I have a Div labeled 'icon' with the class 'lock', and I aim to allow users to click on the background image of this Div to switch its class from 'lock' ...