aidewoode/office-ui-fabric-vue

Event Handler is lost when button is added to overflow menu in the command bar

Akhoy opened this issue · 3 comments

Akhoy commented

Like the title mentions, event handler of a button is lost if the button is moved to the overflow menu while using the command bar. On inspecting it with dev tools, I was able to find the reason. The button element is turned into an anchor tag. Please let me know if there is any fix for this.

aidewoode commented

Hi, can you provide a sample of your code?

Akhoy commented

Hi, here's some sample code:

<ou-command-bar>
  <template slot='main'>        
    <ou-command-button icon='Save' @click="save">Save</ou-command-button>
    <ou-command-button icon='Accept' @click="updateOperation('approve')" v-if="ifEditMode()">Publish &amp; Approve </ou-command-button> 
    <ou-command-button icon='Edit' @click="editProps" v-if="ifEditMode()">Edit Properties</ou-command-button>
    <ou-command-button icon='Down' @click="updateOperation('update')" v-if="ifEditMode()">Update Properties</ou-command-button>          
  </template>  
  <template slot='side'>
    <ou-command-button icon='ChromeBack' @click="exit">Exit to Library</ou-command-button>
  </template>
  </ou-command-bar>

The click event stops working for buttons which are hidden under the overflow menu.

aidewoode commented

OfficeDev/office-ui-fabric-js#26 , It's an issue from office-ui-fabric-js.