Ember parent component form submit action getting triggered from out side of form

I have a one search input box helper wrap with form and ember submit action. On key press i am fetching result from server and showing in for loop inside div which is outside of form and an in different div and component.

I have also added proper tab index to search result div and element inside it using help and logic.

Everything works fine and i am able to navigate to result row using the tab key but when i click on button which inside child component it is firing submitSearch action of parent component than calling it own action startChat.

Does anyone had idea why submitSearch is also getting called before startChat when button in clicked out side form ?

My parent component

import Ember from 'ember';
import DS from 'ember-data';
export default Ember.Component.extend({
    classNames: ['suggest-search'],

    submittingSearch: false,
    noRecentsYet: false,

    actions: {
        submitSearch: function () {
            this.set('submittingSearch', true);

            let query = this.get('query');

            this.setProperties({
                loading: false,
                showRecents: false,
                dismissed: true
            });

            this.$('input').blur();

            this.bubbleAction({
                action: 'performSearch',
                actionContext: [query]
            });
        },

        clearInput: function () {
            this.$('input').focus();
            this.set('query', '');
        }
});

My child component

import Ember from 'ember';
import DS from 'ember-data';
export default Ember.Component.extend({

    actions: {
        startChat: function () {
            this.bubbleAction({
                action: 'openChatRoom',
                actionContext: [this.get('jid')]
            });
        },
});

Form div

<div class="search-input">
    <form {{action "submitSearch" on="submit"}} class="{{if isQuerySpecifiedWithResults 'query-specified'}}">
        {{input class="search-query" autocomplete="off" value=query tabindex="1" disabled=hideInput}}

        <div class="search-icon">
            <i class="{{if loading 'pc-moon pc-spin pc-loading' 'pc-moon pc-search'}} {{if showInput "show-input" ""}}"></i>
        </div>

        <button type="button" class="clear-search-icon" {{action "clearInput"}}>
            <i class="pc pc-close-circle"></i>
            <span class="sr-only">{{t "common.clear"}}</span>
        </button>
    </form>
</div>

Search Div form

<div class="has-results">
                    {{#each results key="id" as |entity index|}}
                        <div class="entity {{if entity.groupType 'group-entity' 'person-entity'}}" tabindex="{{searchTabIndex index}}" >
                            {{entity-mini.default entity=entity tabOrder=index}}
                        </div>
                    {{/each}}

Child component template

<button {{action "startChat"}} class="btn btn-purecloud btn-chat {{unless chatEnabled 'hide'}}">
            <i class="pc-moon pc-chat" tabindex="{{searchTabIndex tabOrder}}" ></i>
        </button>