iron-data-table selected-item throws 'null' when currently selected item is selected again

In iron-data-table, when I click any currently selected row, I expect the selected-item ({{selectedItem}}) object to reflect the currently (and previously) selected row; but instead, it becomes null.

Steps to recreate the problem:

Open this jsBin.
Select any row.
Notice selected object prints to top of page and to console.
Select a different row.
Notice newly selected item prints to top of page and to console.
Clear console. (Optional. Will help you see results of next step.)
Click currently selected row.
Notice selected-item ({{selectedItem}}) object is now null.

How can I correct this so the selected object is the newly selected row (which is the previously selected row) and not null?

http://jsbin.com/xucemijada/1/edit?html,console,output

<!DOCTYPE html>
<html>  
  <head>
    <base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
    <link rel="import" href="polymer/polymer.html">

    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>

    <link rel="import" href="iron-ajax/iron-ajax.html">
    <link rel="import" href="paper-button/paper-button.html">

    <link rel="import" href="iron-data-table/iron-data-table.html">
    <link rel="import" href="iron-data-table/default-styles.html">
  </head>
  <body>
    <x-foo></x-foo>
    <dom-module id="x-foo">
      <template>
        <style>
        </style>
        [[_computeSelectedStr(selectedItem)]]

        <iron-ajax
            auto
            url="https://saulis.github.io/iron-data-table/demo/users.json" 
            last-response="{{users}}"
            >
        </iron-ajax>
        <iron-data-table id="grid"
                         selection-enabled
                         items="[[users.results]]"
                         selected-item="{{selectedItem}}"
                         >
          <data-table-column name="Picture" width="50px" flex="0">
            <template>
              <img src="[[item.user.picture.thumbnail]]">
            </template>
          </data-table-column>
          <data-table-column name="First Name">
            <template>[[item.user.name.first]]</template>
          </data-table-column>
          <data-table-column name="Last Name">
            <template>[[item.user.name.last]]</template>
          </data-table-column>
          <data-table-column name="Email">
            <template>[[item.user.email]]</template>
          </data-table-column>
        </iron-data-table>

      </template>
      <script>
        (function(){
              'use strict';
          Polymer({
            is: 'x-foo',
            observers: [
              '_selectedItemChanged(selectedItem)' ,
            ],
            _selectedItemChanged: function(ob) {
              console.log('selectedItem', ob);
            },
            _computeSelectedStr: function(ob) {
              return JSON.stringify(ob);
            },
          });
        })();
      </script>
    </dom-module>
  </body>
</html>

Solution

When a row is clicked a second time, the item gets deselected and having null in selectedItem is meant to reflect that. Similarly, in multi-select mode selectedItems is empty when nothing is selected.

Since v1.0.1 <iron-data-table> will fire deselecting-item event which can be used to prevent deselection.

table.addEventListener('deselecting-item', function(e) { e.preventDefault(); });

I've updated your JSBin to show an example how to use this event: http://jsbin.com/dubuyoy/edit?html,console,output