The UI bootstrap dropdown toggle requires two clicks to reopen after being manually closed

Utilizing the UI Bootstrap drop-down element to display the calendar from angular-bootstrap-datetimepicker upon clicking. Additionally, a $watch has been implemented to close the dropdown once a date is chosen.

Access the Plunker here

<div uib-dropdown id="calendar1">
  <h4>
    <a uib-dropdown-toggle id="calendar1-toggle" href="">Select Date <b class="caret"></b>
    </a>
  </h4>
  <ul uib-dropdown-menu>
    <datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }"></datetimepicker>
  </ul>
</div>

$scope.$watch('date', function(newValue){                    
   angular.element(document.getElementById('calendar1')).removeClass('open');
})

The removeClass('open') method did close the dropdown but introduced a new issue. After selecting a date, the dropdown toggle needed to be clicked twice to open.

Upon investigating the uib source code and making some adjustments, the following was attempted:

window.angular.element(document.getElementById('calendar1')).removeClass('open');
window.angular.element(document.getElementById('calendar1-toggle'))
  .removeClass('collapse')
  .addClass('collapsing')
  .attr('aria-expanded', false)
  .attr('aria-hidden', true);

Despite these changes, the toggle still required double-clicking. What could be the error in my approach?

javascriptangularjstwitter-bootstrapangular-ui-bootstrap

Answer №1

Stop manually changing classes to toggle a uib-dropdown. Follow the documentation and use the is-open attribute to show/hide the dropdown:

Here is the updated markup:

<div uib-dropdown id="calendar1" is-open="dropdownOpen">
  <h4>
    <a uib-dropdown-toggle href="">Select Date <b class="caret"></b>
    </a>
  </h4>
  <ul uib-dropdown-menu>
    <datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }">

    </datetimepicker>
  </ul>
</div>

Update the script like this:

  $scope.$watch('date',function(newValue){
    $scope.dropdownOpen = false;
  });

Check out the Plunker for a live example: https://plnkr.co/edit/touxnNRmnsefAMScCprC?p=preview

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

Unable to retrieve information from service using Angular 1.6 and TypeScript

I'm having an issue retrieving data from a Service in my Controller. Here is the code for my Service file: import {IHttpService} from 'Angular'; export class MyService { public static $inject = ['$http']; constructor(private $htt ...

angularjstypescriptangularjs-http

``Current issue with Grunt Connect Prism Mock Server - requests are not being properly

Currently, I am aiming to utilize grunt-connect-prism (as explained here) in order to intercept server requests from my AngularJS application and use them as mock data for protractor E2E tests. Alternatively, I am open to suggestions for better server moc ...

angularjsgruntjsprotractorangularjs-e2engmocke2e

Display loading spinner and lock the page while a request is being processed via AJAX

Currently, I am working on a project using MVC in C#, along with Bootstrap and FontAwesome. The main objective of my project is to display a spinner and disable the page while waiting for an ajax request. Up until now, I have been able to achieve this go ...

javascriptjqueryhtmlajax

Bidirectional communication between server and client using socket.io in node.js

I'm currently working on developing a server code in node.js where the client, running on a browser, will send data to the server when a specific ".on" event occurs. The task on the server side is to receive this incoming data from the client and then ...

javascriptnode.js

Unable to utilize jQuery's .append(data) function due to the need to use .val(append(data)) instead

I have been attempting to utilize JQuery .append(data) on success in order to change the value of an input to the appended data like this: .val(append(data)), but it doesn't seem to be working. Surprisingly, I can successfully change the value to a st ...

javascriptjqueryajax

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...

javascriptjqueryhtmlcss

Issue with populating dropdown menu inside jquery modal dialog box

When I click on the 'create new button', a modal window form pops up with a dropdown menu. The dropdown is supposed to be populated via ajax with the help of the populateUserData() function. Even though the ajax call seems to be successful, I am ...

javascriptjqueryajax

"After refreshing the page, the .load() function did not run as

After loading the page and adjusting the viewport size, I am trying to retrieve the dimensions of images. While I can successfully get image dimensions after the page loads using .load, I am struggling to find a way to update the image sizes when the viewp ...

javascriptjquery

Steps for creating an HTML report using Intern JS

Our team relies on intern JS for automating functional tests, however we are facing difficulty in generating an html report. I attempted to use locvhtml as suggested by the Intern documentation (https://theintern.github.io/intern/#reporter-lcov), but unfo ...

javascriptselenium-webdriverautomated-testsui-automationintern

Encountering issues with properly updating the Vuex store

Looking at my Vuex 2 store: const datastore = new Vuex.Store({ state: { socketcluster: { connection: false, channels: [] }, selected_offers: [] }, mutations: { addOffer: function(offer) { datastore.state.s ...

javascriptvue.jsvuejs2vuex

Using the Ionic framework to transfer data from a controller variable to a page

Hey there! I'm currently working on a hybrid app using the Ionic Framework, but I believe my error lies more within Angular. Here's the code snippet that's giving me trouble: <ion-view class="back" ng-controller="webCtrl" view-title="{{ ...

angularjsionic-framework

The content within the div appears to be in a perpetual state

I'm working on creating a chat application with a single interface. I've encountered an issue where the content in the middle div "messages" keeps bouncing, including the scroll bar. How can I resolve this problem? Additionally, I'm unable ...

javascripthtmlcss

The absence of HttpOnly Secure Cookies being transmitted

Here we go again, another inquiry regarding httpOnly Cookies. Seems like many others are facing the same predicament as me. Even though I receive the cookie from the server, it doesn't accompany other requests. I have mysite.example.com in angularj ...

javascriptangularjscookieshttponly

Secure your React TypeScript applications with GraphQL authentication

When users try to log in on my website, I need to verify their authentication using data from a GraphQL API. I referred to this tutorial for guidance: https://www.apollographql.com/docs/react/networking/authentication/ In my GraphQL playground, I execute ...

javascriptreactjstypescriptgraphqlapollo

`Populating fields in Firebase``

I am currently in the process of transitioning from a Mongoose + Express app to using Firebase + Express. However, I am facing some challenges with populating related fields similar to how it is done in Mongoose. Is there a more efficient way to achieve th ...

javascriptnode.jsfirebaseexpressfirebase-realtime-database

Can you explain the concept of ".el" as it relates to JavaScript, HTML, and jQuery?

After conducting a search on Google, I didn't find much information. Perhaps I am using the wrong terms. I am trying to figure out what the "el" in "$.el" represents in the following code snippet: $.el.table( $.el.tr( $.el.th('first name ...

javascriptjqueryhtml

Accessing an array of objects within nested objects results in an undefined value

I am facing an issue with my JavaScript object that is retrieved from MySQL. The object has a property which contains an array of other objects, as demonstrated below: parentObject = { ID: "1", Desc: "A description", chi ...

javascriptarraysangularjsobject

Incorporate a fresh attribute to the JSON data in an Angular API response

I'm currently working on updating my JSON response by adding a new object property. Below is an example of my initial JSON response: { "products": [{ "id": 1, "name": "xyz" }] } My goal is to include a new object property ca ...

javascriptangulartypescriptangular2-services

Steps to dynamically adjust an element's width in CSS depending on the presence of a separate element

I have a text input box appearing on the left side with a button positioned next to it on the right. For certain pages, I want to display a checkbox next to the input box and move the button below it. Is there a way to achieve this using CSS flexbox or a ...

javascripthtmljquerycss

Having difficulty locating audio files within a Next.js project

I am facing challenges when trying to import my audio files into a redux slice. Currently, I am attempting to retrieve my audio files from the app > public > audio directory. I have made efforts to access my audio files through 2 different director ...

javascriptreactjsnext.jsaudioredux