office-ui-fabric-vue icon indicating copy to clipboard operation
office-ui-fabric-vue copied to clipboard

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

Open Akhoy opened this issue 7 years ago • 3 comments

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.

Akhoy avatar Jun 05 '18 11:06 Akhoy

Hi, can you provide a sample of your code?

aidewoode avatar Jun 07 '18 03:06 aidewoode

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.

Akhoy avatar Jun 07 '18 05:06 Akhoy

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

aidewoode avatar Jun 08 '18 09:06 aidewoode