es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo actualizar el ancho de Tippy cuando cambie la referencia

21 Jul, 2023 Programación

Estoy intentando usar un modificador para actualizar el estado de la instancia de tippy a medida que cambia la referencia, sin éxito:

modifiers: [
  {
    name: "setMaxWidth",
    phase: "write",
    enabled: true,
    fn: ({state, instance}) => {
      console.log(state);
      const refWidth = state.rects.reference.width;
      state.rects.popper.width = refWidth;
      return state;
    },
  },
],

¿Qué estoy haciendo mal?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Es difícil determinar qué puede estar yendo mal sin más información sobre el problema que estás experimentando. Sin embargo, aquí hay algunas cosas potenciales a considerar:

    1. ¿Estás pasando el array modifiers al objeto options cuando inicializas la instancia de tippy? Por ejemplo: 
      tippy(el, {
 modifiers: [ /* tu array de modifiers */ ],
 // otras opciones de configuración...
});
    2. ¿Has verificado que el modificador setMaxWidth realmente se esté aplicando? Podrías agregar algunos registros al método fn para ayudar a determinarlo: 
      fn: ({ state, instance }) => {
 console.log('Modificador setMaxWidth aplicado');
 console.log(state);
 const refWidth = state.rects.reference.width;
 state.rects.popper.width = refWidth;
 return state;
},
    3. ¿El ref realmente está cambiando? Si el ref no cambia, entonces el modificador no se volverá a aplicar y el estado no se actualizará. Podrías probar agregar algunos registros al código que actualiza el ref para verificar que se esté desencadenando correctamente.

    Esperemos que una de estas sugerencias ayude. Si no es así, por favor proporciona más información o fragmentos de código para que podamos diagnosticar mejor el problema.

Comments are closed.