search

aidewoode / office-ui-fabric-vue

Office UI Fabric implementation for Vue.js
https://aidewoode.github.io/office-ui-fabric-vue/
Other
273 stars 30 forks source link

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

Open Akhoy opened 6 years ago

Akhoy commented 6 years ago

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 6 years ago

Hi, can you provide a sample of your code?

Akhoy commented 6 years ago

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 6 years ago

https://github.com/OfficeDev/office-ui-fabric-js/issues/26 , It's an issue from office-ui-fabric-js.