Polymer JS input value can be set however not being rendered in the UI

Question

I have two fields called LegalName and OperatingName (field 1 and field 2). When a value is being added to id="legalName" an eventlistener should be added so when we focusout and tab to field 2 the value of field 2 with id="operatingName" defaults to value of LegalName. Now this is in Polymer where regular JavaScript event listener won't see/recognizes the ids. this is what i got however, so far the value is being set but when we focusout it won't get rendered. any help would be greatly appreciated.

 _defaultToCompanyLegalName() {
                var el = this.$.legalName;
                if (el) {
                    this.$.commercial.addEventListener('focusout', function () {
                        this.$.operatingName.value = this.$.legalName.value;
                    })
                }
            }

id="commercial" is the id of the parent DIV.

<div class="row" id="commercial">
            <div class="column mandatory">
                <div style="padding-right: 10px;">
                    <label for="companyLegalName">Company Legal Name</label>
                    <input id="legalName" type="text" value="{{_contract.companyLegalName::input}}" placeholder="Company Legal Name" />
                </div>
            </div>

            <div class="column">
                <div style="padding-right: 10px;">
                    <label for="companyOperatingName">Company Operating Name</label>
                    <input id="operatingName" type="text" value="{{_contract.companyOperatingName::input}}" placeholder="Company Operating Name" />
                </div>
            </div>
        </div>

Answer 1

Eventlistener is added on the div "#contract " though it should ideally be on the input field "#legalName". I succeeded in solving this issue by adding a on-focusout event to "#legalname" input and setting the value of the property "_contract" which will set the input field "#operatingName" value as it already has two way binding to it.

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="test-main">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>
        <div class="row" id="commercial">
            <div class="column mandatory">
                <div style="padding-right: 10px;">
                    <label for="companyLegalName">Company Legal Name</label>
                    <input id="legalName" type="text" on-focusout="_defaultToCompanyLegalName" value="{{_contract.companyLegalName::input}}" placeholder="Company Legal Name" />
                </div>
            </div>

            <div class="column">
                <div style="padding-right: 10px;">
                    <label for="companyOperatingName">Company Operating Name</label>
                    <input id="operatingName" type="text" value="{{_contract.companyOperatingName::input}}" placeholder="Company Operating Name" />
                </div>
            </div>
        </div>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class TestMain extends Polymer.Element {
      static get is() { return 'test-main'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'test-main'
          },
          _contract: {
            type: Object,
            value: {},
            notify: true
            
          },
        };
      } 
        _defaultToCompanyLegalName(e) {
            this.set("_contract.companyOperatingName",  this._contract.companyLegalName);
        }
        
        connectedCallback(){
            super.connectedCallback();
        }
    }

    window.customElements.define(TestMain.is, TestMain);
  </script>
</dom-module>