Reset a input as able again on onClick event after be disable

Question

The situation that I have is: I have a searchbox to find colleges, and one of the options that are available in the results is I can't found my college. This option let you enter the name of your college manually in other input type="text" that only appear if you click on this option. When you click the option to enter the college manually the searchbox became disable using and ng-disable. The functionality that I need to implement is that when the user click on the disable searchbox again this one can be able again, hide the other input text to insert the college manually and let him/her be able to search for college again. This is kind of representation of the situation code:

Template:

...    
    <div class="input-wrapper">
      <input class="searchbox" ng-disabled="!searching" type="text" ng-model="collegeSearch" ng-click="searchingAgain()">
    </div>

    <br>

    <ul class="result-wrapper" ng-show="searching && collegeSearch.length > 0">
      <li>Result 1</li>
      <li>Result 2</li>
      <li ng-click="insertManually()">I can't found my college</li>
    </ul>

    <input ng-show="!searching" type="text" placeholder="Enter the college name manually">
...

Controller:

angular.module('tAngularApp')
      .controller('MainCtrl', ["$scope", "$rootScope", function ($scope, $rootScope) {
        this.awesomeThings = [
          'HTML5 Boilerplate',
          'AngularJS',
          'Karma'
        ];

        $scope.searching = true;

        $scope.insertManually = function () {
            $scope.searching = false;
            $scope.collegeSearch = "";
        }

        $scope.searchingAgain = function () {
            console.log('Searching ...');
            $scope.searching = true;
        }

    }]);

The problem is that when the searchbox input is disabled the ng-click never fire, so i can acivate again the search funcionality.

Can someone help me to find a solution for this? Thanks.

Here are some work arounds. [angular using class instead of disabled attribute](http://stackoverflow.com/questions/35535350/angular2-disable-button). [Event on a disabled input](http://stackoverflow.com/questions/3100319/event-on-a-disabled-input). As you state in your question, disabled inputs don't fire events as they would if enabled. Another options is to hide and show a button to search for a custom school. The button could enable and disable the search input instead of clicking the input itself. This is basically using ngClass though (first link). — user3366016, Dec 28 '16 at 16:59
Thanks @user3366016 .Could be a possible way, but I need to respect a specific design, so I can't add more elements like buttons. — Yoan, Dec 28 '16 at 17:06
From a UI point of view disabling the searchBox does not make sense. It has a valid value that the user choose even if it is called `Can't find my college` — bhantol, Dec 28 '16 at 17:10
Well @bhantol as you know, the customer is always right. Besides, is not so crazy the idea, you have 2 ways to pick a college: 1- Searching in the DB options. 2- adding manually your college. If the user picks one way the other should be disabled or hide it. Better for UX. — Yoan, Dec 28 '16 at 17:15
Can you use "ng-readonly={{truthy expression}}" instead of "disabled"? As I understand, you'd still be able to use ng-click in a readonly field. — Sam Rodrigues, Dec 28 '16 at 17:56

score 0 · Accepted Answer · answered Dec 28 '16 at 17:47

ng-disabled when true adds attribute disabled. Browser is not going to let any pointer events (which generates click event) generate. So the control is not going to receive any clicks or changes.

So you may have to trick this slightly differently:

Working plunkr

Please note we added ng-click on the wrapper div #input-wrapper. Also ng-click/ng-change either one is fine on the input however you may want to use ng-change to not receive unnecessary changes.

<div class="input-wrapper" ng-click="searching = true">
  <input class="searchbox" ng-disabled="!searching" type="text" ng-model="collegeSearch" ng-change="searchingAgain()" ng-model-options="{ debounce: 200 }">
  <div class="searchbox-reset"></div>
</div>

Reset a input as able again on onClick event after be disable

1 Answers1