Angular Bootstrap-Select: Displaying options even after selection

There seems to be a bug in the angular bootstrap select demo section. After selecting an option, the dropdown continues to display options instead of hiding them. This issue does not occur when the ng-model attribute is omitted.

You can view an EXAMPLE here.

Here is a snippet of code:

      <select toggle selectpicker ng-model="form">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
      </select>

Best regards,

Answer №1

It appears that the events attached to the directive angular-bootstrap-select.extra on the li elements are not triggered when ng-model is linked to them. The issue lies in the angular-bootstrap-select directive where a change in model value triggers element.selectpicker('refresh');, causing the list items to be removed and recreated, resulting in the loss of click events from the angular-bootstrap-select.extra directive on the li's. To address this, you can implement event delegation on the parent element as a temporary solution.

Consider:

 element.next().on('click', 'li', function () {
       target.toggleClass('open')
});

Instead of :-

 element.next().find('li').bind('click', function () {
    target.toggleClass('open')
 })

Plnkr

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

Simple chart with four sections in DimpleJS (D3)

Recently I decided to give DimpleJS a try for the first time with hopes of creating something like this: However, I seem to have run into some trouble. No matter what I do, nothing appears on the screen. http://jsbin.com/xosehedejo/1/edit window.onloa ...

Utilizing NodeJS to overcome challenges with social sharing and search engine optimization on single-page frameworks such as AngularJS

I recently came across an insightful blog post discussing the challenges of social sharing in AngularJS and proposing a solution using Apache as a proxy. While the suggested solution works well for smaller websites, it becomes cumbersome for web apps with ...

Discover the magic of Google Charts with the ability to showcase HTML source code within tooltips

I am attempting to show a Pie Chart using Google Charts with HTML in the tooltips, but I am encountering an issue where the HTML source is visible. I have tried setting html:true on the data column and tooltip.isHtml in the options, but I am unsure of what ...

Slick Slider - Defining the Initial Slide

My website features a dynamic carousel showcasing a basketball team's schedule, with games sorted by date for the current season. I am trying to align the slider to display the upcoming game at the center. How can I designate a specific slide as the ...

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

Can anyone assist me with a problem I am facing on my scripting page? I am currently working on a website that showcases properties. I would like to know how to prevent a specific div from loading when the page initially loads, and instead have its content ...

Arranging an array of arrays based on the mm/dd/yyyy date field

Currently, I am facing an issue while attempting to sort data obtained from an API by date in the client-side view. Here is an example of the data being received: address: "1212 Test Ave" address2: "" checkNumber : "" city: "La Grange" country: "" email: ...

Is it possible to test a Node CLI tool that is able to read from standard input with

I'm looking for a way to test and verify the different behaviors of stdin.isTTY in my Node CLI tool implementation. In my Node CLI tool, data can be passed either through the terminal or as command line arguments: cli.js #!/usr/bin/env node const ...

In Firefox, the HTML label fails to activate the corresponding input field when the mouse is moved while clicking

If you click on the label in the example below, it will change the state of the input. document.querySelector("label").addEventListener("click", function() { console.log("clicked label"); }); label { -webkit-user-select: none; -moz-user-select: no ...

Problem with implementing swipeable tabs using Material-UI in React

I'm experiencing an issue in my application with the react swipeable tabs from material-ui. I followed all the installation steps recommended in the documentation. Currently, I am encountering the error shown in the screenshot below. Could there be a ...

Error message due to an undefined function in Angular datatables Fixed Columns

I recently implemented angular datatables with fixed column in my application. Here is the HTML code I used for the view: <div class="row" ng-controller="PerformanceCtrl"> <table id="example" datatable="" class="stripe row-border or ...

Oops! Looks like there's an unexpected error with the module 'AppRoutingModule' that was declared in the 'AppModule'. Make sure to add a @Pipe/@Directive/@Component annotation

I am trying to create a ticket, but I encountered an error. I am currently stuck in this situation and receiving the following error message: Uncaught Error: Unexpected module 'AppRoutingModule' declared by the module 'AppModule'. Plea ...

Is there a way to generate a hierarchical list menu using strings?

Within an HTML Application (HTA), I am utilizing vbscript to retrieve a list of subnet locations which is output as text in the following format: Chicago Denver Dallas Dallas/North Dallas/South Dallas/West Dallas/West/Building1 Dallas/West/Bu ...

Utilizing .env Variables in NestJS Main App Module for Establishing Database Connection

I recently embarked on my first NestJS project, where I initially had a hardcoded database connection string in app.module.ts that worked perfectly fine. However, our project requirements called for fetching the database configuration values from environm ...

How can I stop a user from navigating through links or submitting forms using jQuery?

I'm exploring the idea of converting my website into a Single Page Application. One challenge I am facing is capturing the navigation process, for example: <a href="myData.php">Change My Data</a> When a user clicks on the "Change My Data ...

What is the best way to modify the Xtype attribute based on whether the device is running on Android or iOS

I am currently working on a project using Extjs6.0.2, but I have encountered an issue with creating the xtype: 'namefield'. It seems that this type of xtype is supported on Android devices but not on iOS devices. Despite this challenge, I am dete ...

Navigating a list using AngularJS within an HTML view: tips and tricks!

Implementing AngularJS within the context of the Ionic framework. The $scope on the front-end consists of: an object User that contains a list of sports: $scope.user = { sports: { "running": true, "football": true } } a list named "matches" containing u ...

Set the rowspan to 2 when the v-for index does not equal 2

This is the table I am working with: <table class="table table-condensed table-sm table-striped table-bordered" id="list"> <thead> <tr> <th v-for="(column, index) in columns" :key=& ...

I am encountering an issue with the return ( statement and I'm unable to comprehend the reason behind it

import { connect } from 'react-redux' import { Link } from 'react-router-dom' class MyFavoriteStories extends React.Component { markAsFavorite = (e) => { this.setState({ bgColor: "blue" }) } render () { con ...

Transform an array of strings into an array of floating point numbers using AngularJS

Hey everyone! I'm having trouble converting an array of strings into floats. When using map(parseFloat), I'm only getting integer numbers. Could the issue be with the commas in 40,78 causing parseFloat to interpret it as 40 instead of 40.78? Her ...

Exploring arrays and objects in handlebars: A closer look at iteration

Database Schema Setup var ItemSchema = mongoose.Schema({ username: { type: String, index: true }, path: { type: String }, originalname: { type: String } }); var Item = module.exports = mongoose.model('Item',ItemSchema, 'itemi ...