NCEAS / metacatui

MetacatUI: A client-side web interface for DataONE data repositories
https://nceas.github.io/metacatui
Apache License 2.0
42 stars 26 forks source link

Copy button in services table causing page to reload instead of copying #1616

Closed amoeba closed 3 years ago

amoeba commented 3 years ago

Just saw this behavior on https://search.dataone.org/view/%7B859BFECB-20E0-483A-9DD7-405DDBCE9052%7D but haven't dug in yet to see why or whether this has been fixed on a release since what's deployed on search.dataone.org: When I click the Copy button in the Alternate Data Access Table, the page reloads (navigates) instead of copying the appropriate URL.

Steps:

  1. Visit https://search.dataone.org/view/%7B859BFECB-20E0-483A-9DD7-405DDBCE9052%7D?
  2. Click any of the Copy button in the Alternate Data Access
  3. See the page reloads

I'll take a look when I'm off calls for the day today.

amoeba commented 3 years ago

This is a weird one. Mostly because this worked at some point, I'm pretty sure, because I implemented this way back when.

It looks like what's going on is that the Copy button is implemented as a button and the metadata view (really, the response from the Metacat View Service) uses a form element to contain everything (kinda weird?). It looks like clicking the Copy button is submitting the form which was definitely not past behavior so maybe browsers changed. I can confirm this is not working in Chrome, Firefox, and Safari on my system. I swear buttons in forms has to have a type of submit to actually submit the form. But MDN doesn't lie:

type The default behavior of the button. Possible values are: submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value. reset: The button resets all the controls to their initial values, like . (This behavior tends to annoy users.) button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.

I tested if adding a type=button attribute to the button tag fixed things and it does. I'm going to walk over to the Metacat repo and do this over there.