Nuestro equipo está trabajando en un pequeño error en una aplicación en línea en un sitio web corporativo grande.
El Cliente hace clic en Siguiente para ir a la siguiente sección, pero no hay una URL siguiente: todo se maneja en la misma dirección web.
El error es: en una de las "páginas", el Cliente hace clic en Siguiente y el enfoque en la siguiente página va a uno de los controles inferiores. No sé qué control, pero está pasando por alto los campos obligatorios al hacer que la página se desplace hacia la parte inferior del formulario. Soy el único desarrollador de software en nuestro equipo y mi experiencia es en Windows Forms.
En el código, VS Code encontró varias instancias de ScrollIntoView adjuntas a los controles básicos. Los puntos de interrupción son inútiles porque el código debe implementarse en el servidor de prueba para ver los resultados.
Al usar los puntos de interrupción del navegador en javascript en el evento de clic del mouse, pude pasar a un segmento de código que lee return Promise.resolve(config); - este es ese archivo:
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } import { getAccessToken } from 'bank-authentication'; import BankLogger from 'bank-logger'; var AuthenticationRequestInterceptor = /*#__PURE__*/function () { function AuthenticationRequestInterceptor() { _classCallCheck(this, AuthenticationRequestInterceptor); this._logger = new BankLogger(); } _createClass(AuthenticationRequestInterceptor, [{ key: "fulfilled", value: function fulfilled(config) { return getAccessToken().then(function (accessToken) { if (accessToken) { config.headers = config.headers || {}; config.headers.Authorization = "Bearer ".concat(accessToken); } return Promise.resolve(config); }, function (error) { //make the call anyway to get the header answer return Promise.resolve(config); }); } }, { key: "rejected", value: function rejected(error) { return error; } }]); return AuthenticationRequestInterceptor; }(); export default AuthenticationRequestInterceptor; //# sourceMappingURL=AuthenticationRequestInterceptor.js.map En VS Code, busqué en todo el proyecto una instancia del texto AuthenticationRequest , pero no está en el código.
¿Cuál es una técnica que puedo usar para averiguar qué está causando que una de estas "páginas" se desplace hacia abajo cada vez que se carga?
El fragmento de código que proporcionó no parece estar directamente relacionado con el evento de desplazamiento que tiene lugar. Tal vez sea causado por lo que sucede después de que se ha resuelto la promesa. Sin embargo, para responder a su pregunta directamente, puede escuchar ScrollIntoView agregando el evento onscroll a su elemento body o al elemento div donde se realiza el desplazamiento:
<div onscroll="preventScroll()"> Este evento luego activará la función preventScroll que ejecutará código como la prevención del desplazamiento:
function preventScroll() { const x = window.scrollX; const y = window.scrollY; window.onscroll = () => window.scrollTo(x, y); } Si desea detener el desplazamiento temporalmente, puede facilitar esto al tener una variable booleana externa como shouldPreventScrolling y establecerla en true antes de que ocurra el evento de desplazamiento que desea evitar. Luego puede desactivarlo en false fuera de la función manualmente o hacerlo en el tiempo de espera:
let shouldPreventScrolling = true; let isCurrentlyPreventingScrolling = false; function temporarilyPreventScroll() { if (shouldPreventScrolling && !isCurrentlyPreventingScrolling) { isCurrentlyPreventingScrolling = true; const x = window.scrollX; const y = window.scrollY; window.onscroll = () => window.scrollTo(x, y); setTimeout(() => { shouldPreventScrolling = false; window.onscroll = temporarilyPreventScroll; isCurrentlyPreventingScrolling = false; }, 1000); } }