martindrapeau/diffdom-input-change-bug.html

## diffdom-input-change-bug.html
<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  	<script src="http://fiduswriter.github.io/diffDOM/diffDOM.js"></script>
    <script>
      $(document).ready(function() {
        var value = 'hello';
        var template = `
          <div>
            <input type="text" value="{value}" />
            <button>Clear</button>
          </div>
        `;
        var dd = new diffDOM();

        function render() {
          var div = $('div')[0];
          var $html = $(template.replace('{value}', value || ''));
          var diff = dd.diff(div, $html[0]);
          dd.apply(div, diff);

          $('pre').text(diff.map(function(o) {
            return JSON.stringify(o);
          }).join('\n'));
        }

        $(document).on('click', 'button', function(e) {
          value = null;
          render();
        });

        render();

      });
    </script>
  </head>
  <body>
    <h1>INPUT does not change</h1>
    <p>
      Click on the Clear button.
      It will set the <code>value</code> attribute to an empty string.
      Yet the element in the DOM does not change.
      It takes another click on Clear to make it happen.
      Below, is output the diff for debugging.
    </p>
    <div></div>
    <pre></pre>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="http://fiduswriter.github.io/diffDOM/diffDOM.js"></script>
	<script>
	$(document).ready(function() {
	var value = 'hello';
	var template = `
	<div>
	<input type="text" value="{value}" />
	<button>Clear</button>
	</div>
	`;
	var dd = new diffDOM();

	function render() {
	var div = $('div')[0];
	var $html = $(template.replace('{value}', value \|\| ''));
	var diff = dd.diff(div, $html[0]);
	dd.apply(div, diff);

	$('pre').text(diff.map(function(o) {
	return JSON.stringify(o);
	}).join('\n'));
	}

	$(document).on('click', 'button', function(e) {
	value = null;
	render();
	});

	render();

	});
	</script>
	</head>
	<body>
	<h1>INPUT does not change</h1>
	<p>
	Click on the Clear button.
	It will set the <code>value</code> attribute to an empty string.
	Yet the element in the DOM does not change.
	It takes another click on Clear to make it happen.
	Below, is output the diff for debugging.
	</p>
	<div></div>
	<pre></pre>
	</body>
	</html>