I am facing an issue where the functionality of a div is affected when clicking on an input box inside it.
When the div is selected and colored red, clicking on the input box within the selected div causes the div to become unselected (grey in color).
I tried using $event.stopPropogation on the input box to prevent this behavior, but it didn't work as expected.
Here is the HTML code:
<body>
<div class="container" ng-controller="BaseController">
<div class="row" ng-click="selectedDiv=!selectedDiv" ng-class="{'colorDiv':selectedDiv}">
<input placeholder="enter text" ng-mousedown="$event.stopPropagation()">
</div>
</div>
</body>
And the controller:
app.controller('BaseController', function($scope) {
$scope.selectedDiv=true;
});
CSS styling:
.row{
width:250px;
height:200px;
border:1px solid grey;
}
.colorDiv{
border:1px solid red;
}
Check out the DEMO for reference.
Any assistance with resolving this issue would be greatly appreciated.