food-market/src/food-market.web
nurdotnet 8eceff0bb5
Some checks failed
CI / Backend (.NET 8) (push) Successful in 1m3s
CI / Web (React + Vite) (push) Successful in 41s
Docker Public / Build + push Public (push) Successful in 26s
Docker Web / Build + push Web (push) Successful in 32s
Docker Public / Deploy Public on stage (push) Successful in 10s
Docker Web / Deploy Web on stage (push) Successful in 11s
CI / POS (WPF, Windows) (push) Has been cancelled
fix(phone): сохранять позицию курсора после нормализации
Курсор не должен прыгать в конец после редактирования — он должен оставаться там, где юзер только что внёс изменение.

Корень проблемы: после onChange я вызываю onChange с каноничным «+77…», parent перерендеривает с этим значением, React переписывает input.value на новый display — а нативное поведение браузера в этом случае: при programmatic value-set курсор сбрасывается в конец.

Фикс: сохраняем «сколько цифр стояло до курсора» в момент редактирования, после ре-рендера в useLayoutEffect ставим курсор сразу после той же по счёту цифры в новом display. Учёт по цифрам (а не по абсолютной позиции) корректен даже когда format добавляет/убирает пробелы (например при переходе между «+7 700 1» и «+7 700 12»).

useLayoutEffect (а не useEffect) — чтобы курсор восстанавливался синхронно до paint, без визуального флика.
2026-05-03 18:25:56 +05:00
..
public feat(brand): новый логотип food-market wordmark + apple mark 2026-05-02 00:26:42 +05:00
src fix(phone): сохранять позицию курсора после нормализации 2026-05-03 18:25:56 +05:00
.gitignore Phase 0: project scaffolding and end-to-end auth 2026-04-21 13:59:13 +05:00
eslint.config.js Phase 0: project scaffolding and end-to-end auth 2026-04-21 13:59:13 +05:00
index.html feat(web): rebrand to FOOD MARKET green (#00B207) per mobile app logo 2026-04-21 20:53:42 +05:00
package.json feat(date-field): replace native input with react-datepicker — polished UX 2026-04-26 03:39:51 +05:00
pnpm-lock.yaml feat(date-field): replace native input with react-datepicker — polished UX 2026-04-26 03:39:51 +05:00
README.md Phase 0: project scaffolding and end-to-end auth 2026-04-21 13:59:13 +05:00
tsconfig.app.json Phase 0: project scaffolding and end-to-end auth 2026-04-21 13:59:13 +05:00
tsconfig.json Phase 0: project scaffolding and end-to-end auth 2026-04-21 13:59:13 +05:00
tsconfig.node.json Phase 0: project scaffolding and end-to-end auth 2026-04-21 13:59:13 +05:00
vite.config.ts Phase 0: project scaffolding and end-to-end auth 2026-04-21 13:59:13 +05:00

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])