Disable the belongs to input from the a polymorphic field

[Sandilly]

Hi,

Using an example from the demo site as attached below, is there a way to disable the Post input but leave the Reviewable as is? I do not want the user to be able to select and attach a post but to create a new one always from the link and still see the name of the newly created post.

I tried hooking it up to Stimulus but it keeps targeting both inputs and cannot detect the Post input until the change happens on that select. Any guidance is greatly appreciated.

[Paul-Bob]

Hi @Sandilly, that’s an interesting use case! If I understand correctly, you want the user to be able to choose the reviewable entity but always ensure that a new record is created, rather than selecting from existing ones. Is that right?

[Sandilly]

I was able to disable it on edit view by targeting the DOM element by name but cannot target the same element on the new view, since the onChange triggers before the second select field shows up. :/

[Sandilly]

I was also thinking maybe if I was able to set a default value on the parent resource select box, then the second select field would just be there. I tried putting a default value as one of the types but getting an error.

[Paul-Bob]

I don't know a clear direction to implement this use case, but I'll play with it a bit during the first days of next week and I'll come back with some feedback.

For now, what I can suggest is to remove the searchable: true (if that is present) and add attach_scope: -> { query.none } to the polymorphic field. This will force the user to create a new record since there is nothing to select. This is not the ideal UX, so I'll come back with more feedback in a few days.

Let me know if something is blocking your JS solution, i.e., if having a clear target somewhere would help. Thank you.

[Paul-Bob]

@Sandilly, I experimented with this approach and successfully implemented the desired use case using a MutationObserver.

Please try integrating this code snippet into the stimulus controller associated with your resource and let me know how it goes.

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  async connect() {
    new MutationObserver(() => {
      // Modify this query selector ('#review_reviewable_id') to correspond to the id of your select from the polymorphic field
      const selectElement = document.querySelector('#review_reviewable_id')

      if (selectElement) {
        selectElement.disabled = true
      }
    }).observe(document.body, { childList: true, subtree: true })
  }
}

[Sandilly]

@Paul-Bob Amazing, this works perfect!

Do you know what the best way is to change the placeholder for that select as well? The default is "Choose an option" for both select boxes. I want to keep that for the parent select but for the child to be something else since it is not longer selectable.

I tried selectElement.firstChild.innerHTML = "Create a new one using the link below" but this just freezes the entire window.

Really appreciate all your time looking into this!

[Paul-Bob]

Awesome!

The JavaScript element might have a method to manipulate the placeholder. We have this example that removes all options then adds 1 option as placeholder https://github.com/avo-hq/avo/blob/main/spec/dummy/app/javascript/avo_custom/city_in_country_controller.js#L58 Maybe this can be applied to your use case

However you can utilize the field helper messages to provide guidance to users.

field :reviewable,
  as: :belongs_to,
  polymorphic_as: :reviewable,
  types: [::Fish, ::Post, ::Project, ::Team],
  polymorphic_help: "Select the polymorphic type",
  help: "For the review with the ID of 1 the scope is modified. Please check the code under <code>review_resource.rb</code>",
  ...

I'll mark my previous question as answer since it fixes the original issue, thank you for reaching out!