Issue with mouse focus on repeatable fields

We’re having an issue with the screens which makes editing content a bit painful.

We’re starting to use some repeatable fields to implements carousels and in some cases we can’t move the focus on the fields using the mouse.

For exemple this custom type :

When we click on the « sous-titre » or « texte » fields with the mouse they don’t get the focus so we have to navigate with the keyboard.

Selecting parts of the content with the mouse to format them don’t work either, so again we need to use the keyboard.

We’ve tested it on Chrome, Firefox and Safari.

It seem it could be caused by the drag & drop that can be used to reorder the components.

1 Like

Hey @julien, i’m answering back in public just to inform you that i was able to replicate this issue and i’ve passed it to the tech team so they can take it asap from their backlog.

Thank you for reaching out to us, and if there’s anything you need, let us know!

Hello,

do you know if they had the chance to look at it ? As our site use many repeatable carrousels it makes a bad first impression on our users and makes their work more complicated.

Thanks !

Adding public response for anyone that finds it useful.

The problem was coming from a field inside a Slice, in the JSON the display value, instead of being list is written with uppercase: List .

The solution would be to go to your Custom type JSON and search, inside the slices for this error. For example, in the Custom type that has the Slice “edito_texte_visuel”, change the display value, like so:

 "edito_texte_visuel" : {
    "type" : "Slice",
    "display" : "list",
    "fieldset" : "Édito texte visuel",
    "description" : "Titre + groupes de (sous-titre + bloc de texte + image)",
    "icon" : "art_track",
    "non-repeat" : {
      "couleur_bloc" : {
        "type" : "Select",
        "config" : {
          "options" : [ "Bleu aplat", "Bleu negatif", "Bleu fonce aplat", "Bleu fonce negatif", "Jaune aplat", "Jaune negatif", "Rouge aplat", "Rouge negatif", "Turquoise aplat", "Turquoise negatif", "Vert aplat", "Vert negatif" ],
          "default_value" : "Bleu aplat",
          "label" : "Couleur du bloc"
        }
      },
      "titre" : {
        "type" : "StructuredText",
        "config" : {
          "multi" : "em",
          "label" : "titre"
        }
      }
    },
    "repeat" : {
      "sous_titre" : {
        "type" : "StructuredText",
        "config" : {
          "multi" : "em",
          "label" : "Sous-titre"
        }
      },
      "texte" : {
        "type" : "StructuredText",
        "config" : {
          "multi" : "paragraph",
          "label" : "Texte"
        }
      },
      "illustration" : {
        "type" : "Image",
        "config" : {
          "label" : "Illustration"
        }
      }
    }
  },