iron-list selected-item observer returns null before sending selected object

I am trying to implement single selection on iron list. For every valid click, I get a null immediately followed by actual value. Here is the iron-list code

<iron-list items="[[imagearray]]" as="item" id="itemlist" scroll-target="document" selected-item="{{selectedItem}}" selection-enabled grid>
  <template>
        <div class = "flexchild"style="width:50%"> 
      <iron-image  class = "imagecontainer" sizing = "cover" style = "width:calc(100% - 4px); height:180px;"
      src=[[item.linkwebp]]></iron-image>
       
    </div>
    </template>
</iron-list>

Here is my property object

          selectedItem:
          {
            type:Object,
            observer: '_itemSelected'
          }
          
        _itemSelected()
      {
         

         console.log(this.selectedItem);
         
*
      }

Each time i select an iron-list element, I get null followed by actual element. Any idea whY

Solution

Seams there is no error in your code. May cause something else. Below demo link works quite good.

DEMO

<html>
<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <link rel="import" href="polymer/polymer.html" >
  <link rel="import" href="iron-ajax/iron-ajax.html">
    <link rel="import" href="iron-list/iron-list.html">
    <link rel="import" href="iron-image/iron-image.html">  
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
 <body>
  
 <x-foo></x-foo> 
     
   
  <dom-module id="x-foo">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
      }

    </style>
    <!--In order to retrive some object data -->
    <iron-ajax 
          auto
          id="ajax"
          url="https://randomuser.me/api?results=10"
          last-response="{{response}}"> </iron-ajax>
    
 <iron-list items="[[response.results]]" as="item" id="itemlist" scroll-target="document" selected-item="{{selectedItem}}" selection-enabled grid>
  <template>
        <div class = "flexchild" style="width:50%"> 
      <iron-image   style ="width: 40px;height:40px; border-radius:30px;" src='[[item.picture.large]]'></iron-image> 
          <span>[[item.name.first]] [[item.name.last]]</span> 
       
    </div><br/>
    </template>
</iron-list>
 <pre>[[obj]]</pre>
</template>
    
<script>
    HTMLImports.whenReady(function() {
      
    class XFoo extends Polymer.Element {
      static get is() { return 'x-foo'; }
      static get properties() { return { 
       selectedItem: {
            type:Object,
            observer: '_itemSelected'
          }
     }}
 
    
      _itemSelected() {
         this.obj = JSON.stringify(this.selectedItem, null, 4);
         console.log(this.selectedItem);
      }

  }
customElements.define(XFoo.is, XFoo);
 });
    
</script>
    
</dom-module>
   
</body>
</html>