Paragraphs & OH: Office_hours Action links always point to frontpage on uncollapsed paragraphs

Is this problem New in version 1.17?
Can you reproduceren in version 16 or 12?

Or refresh the page with ctrl-F5

Does it also occur on a 'normal' node form?
js links are now more restricted in 🐛 office_hours.js hides other [Add] buttons in widget Needs review

Hi,

it haven't worked before in paragraphs, so I hoped for the 1.17 Update, but it didn't help. In node form, it works without problems.

I followed your script.
I had no problems.
Except when hitting the 'collapse' button, then ''edit' button.
Then the problem occurs. The workaround is to not hide the office_hours field. The office_hours is collapsible as well.

This is set in the paragraph widget settings 'Edit mode'. Whenever the collapse/edit button is pressed, parapraphs corrupts the office_hours 'add' link. The 'remove' and copy' links seem ok.

Moving this to the paragraphs module from my Swiss friends.

@Eric Heydrich, you can try to apply the patch in https://www.drupal.org/project/office_hours/issues/3424112 🐛 Unable to add, remove or copy timeslot Needs review to see if it fixes your problem. I was having the same issue as you and created that patch for the previous version of the office hours module so maybe it won't apply anymore but it's worth a shot.

@johnv, you've moved this to the paragraphs module but I don't think it's an issue in paragraphs. Paragraphs just adds an id to the element and the javascript of the office hours module is not using the correct kind of selector I think. If you look at my patch in the issue I've mentioned, you'll see I use a different kind of selector which doesn't interfere with the paragraphs id's and should fix this issue.

@jonas139, it could well be that the problem is in office_hours, but the links work when the field is initially uncollpased and [collapse/edit] button is not used.

<div class="js-office-hours-operations-wrapper">
<a href="/" class="office-hours-link" data-drupal-selector="edit-field-oeffnungszeiten-value-0-operations-data-add" id="edit-field-oeffnungszeiten-value-0-operations-data-add--3UzSfpb_cCo">Zeitfenster hinzufügen</a>
<a href="/" class="office-hours-link" data-drupal-selector="edit-field-oeffnungszeiten-value-0-operations-data-clear" id="edit-field-oeffnungszeiten-value-0-operations-data-clear--WWHDRSAgpsE">Entfernen</a>
<a href="/" class="office-hours-link" data-drupal-selector="edit-field-oeffnungszeiten-value-0-operations-data-copy" id="edit-field-oeffnungszeiten-value-0-operations-data-copy--rH7lOJigiz0">Letzten Tag kopieren</a> 
</div>

In the office_hours.js the ID has to end on add, copy or clear. In my example HTML, there is a generated string at the end of the ID. Maybe this is preventing the JS on firing.

@Eric Heydrich, have you tried to apply the changes from https://www.drupal.org/files/issues/2024-02-27/3424112-1.patch → ? There the selector is done on the data-drupal-selector attribute and as I can see in your example, that attribute does end on the correct operation without an id.

@johnv, I'll wait on the reaction of Eric to see if the changes of the patch have helped him. I think it should not break anything else if we just change the id selector to the data-drupal-selector.

@jonas139, @Eric Heydrich, please test latest version of office_hours module . It now contains the proposed change from jonas139.

I have tried the latest version of the module (1.17) using the field in a paragraph, and it is not working. I'll do a little digging to see if I can come up with a solution, but for now, using the field in paragraph doesn't work. The links all direct back to the home page.

@johnv, @Eric Heydrich, Here is the problem when using the office_hours field in a Paragraph entity. The JavaScript runs only once on document.ready. If the office_hours field is used on the node itself, the elements (add, remove, copy links) are part of the document when the script runs. When used in a Paragraph, this isn't necessarily the case. If the field referencing the Paragraph is configured to display closed on the Edit form, the elements aren't added to the HTML until the Paragraph is opened by the user for editing. But the JS script doesn't run again to pick up those elements which is why the links direct back to the home page.

As a temporary solution

You can configure the field referencing the Paragraph entity to display "Open" in the Edit mode (see screenshot). That way, the elements are part of the HTML when it loads and the JS can act on it. HOWEVER, if the Paragraph is collapsed and reopened again, the links won't work as intended and will route you to the home page instead.

Thanks for your feedback.
Let's move this back to Office Hours module.
It appears to be a JS thing. This not the office_hours maintainer's expertise. Help is appreciated. The following related issues hint to changing the moment of calling the JS, introducing 'once' library.
- 📌 Refactor the JavaScript for the widget to use the once library Needs work
- 🐛 Additional slot row disappears after value change when used in nested paragraphs Needs work
There are also problems with 'Chosen' module (just for reference and inspiration):
- 🐛 Chosen module breaks JS enhancements Needs review

Please note that it is best to test with current dev version.