Required tooltip displayed when close modal in FireFox

Question

Got a strange issue, I am developing an angularJS app that is to use Firefox only but I have an issue with the tooltip on a modal if the user clicks the Close button.

When the modal opens there is a dropdown list which is blank by default and is also required. The modal also has a Submit button and Close button. The Submit button is disabled until all mandatory fields are completed and the Close button is always enabled.

If you click the Close button without selecting an option (which is a valid action) the modal closes as expected but the required tooltip is displayed.

Does anyone know of a fix for this issue?

Answer 1

Since the sample code is not exist, based on your question I tried a solution with the "Submit" and "Close" buttons.

Whatever the button you clicks, it fires the submit's function. So you need to block the execution by using $event.preventDefault();

Sample HTML

<form name="form" novalidate ng-submit="saveModal()">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
        <button class="btn btn-success" type="submit">
            <span>Submit</span>
        </button>
        <button class="btn btn-default" ng-click="closeModal($event)">
            <span>Close</span>
        </button>
    </div>
  </div>
</form>

Sample Controller

$scope.closeModal= function ($event) {
    $event.preventDefault();
    // Close modal related codes here
};

$scope.saveModal = function() {
    // I assume that the required tooltip related codes are available 
    // inside the submit's function
};