CalendarDay field is causing reload (refresh) of the whole page after clicking on "next month" arrow

[Yair-Ohana]

Describe the bug

basically, when clicking on the next/previous month buttons (image attached) reload is triggered (?!). The weird part is that it only happens on production, not locally.

To Reproduce

1. Be sure to configure a CalendarDay field.
2. Go to the Admin UI.
3. Click on the next/previous month arrow.

Expected behavior

Clicking on one of the arrows will trigger an event that moving to the next/previous month.

Screenshots

System information

Happens on chrome. Using "@keystonejs/fields": "21.0.0",

Huge thanks.

[stale[bot]]

It looks like there hasn't been any activity here in over 6 months. Sorry about that! We've flagged this issue for special attention. It wil be manually reviewed by maintainers, not automatically closed. If you have any additional information please leave us a comment. It really helps! Thank you for you contribution. :)

[Brandyweb]

Reading the source code and managed to replicate the element but solving the error. I have solved I am using a custom input, to correct the refresh of the page when I change the month.

In any folder you want in my case server create a call CustomFields.

There I create a folder called CalendarDay with 3 files.

• Field.js
• Implementation.js
• index.js

Field.js

/** @jsx jsx */
/* eslint-disable react/react-in-jsx-scope, jsx-a11y/no-autofocus */
import { jsx } from '@emotion/core';
import 'react-day-picker/dist/style.css';
import { DayPicker } from "react-day-picker";
import { Input } from '@arch-ui/input';
import { Alert } from '@arch-ui/alert';
import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
import { parseISO, compareAsc, formatISO, isValid } from 'date-fns';

const CalendarDayField = ({ autoFocus, field, value, errors, onChange, isDisabled }) => {
	const htmlID = `ks-daypicker-${field.path}`;
	const handleDayClick = day => onChange(formatISO(day, { representation: 'date' }));

	return (
		<FieldContainer>
			<FieldLabel htmlFor={htmlID} field={field} errors={errors} />
			<FieldDescription text={field.adminDoc} />
			<FieldInput>
				<DayPicker
					disabled={[
						day =>
							isDisabled ||
							(field.config.dateTo && compareAsc(day, parseISO(field.config.dateTo)) === 1) ||
							(field.config.dateTo && compareAsc(parseISO(field.config.dateFrom), day) === 1),
					]}
					selected={isValid(parseISO(value)) ? parseISO(value) : undefined}
					defaultMonth={isValid(parseISO(value)) ? parseISO(value) : undefined}
					onDayClick={handleDayClick}
				/>
			</FieldInput>

			<FieldInput>
				<Input
					id={htmlID}
					autoFocus={autoFocus}
					onKeyDown={e => {
						// There is a strange bug where after interacting with the day picker
						// and then pressing enter on the input the value is changed to the start
						// of the month. I think this is bug with the day picker.
						// The following is a work-around:
						if (e.key === 'Enter') {
							e.preventDefault();
						}
					}}
					onChange={e => {
						// Tiny bit of date format normalisation for convenience
						const normalisedValue = e.target.value.replace('/', '-').replace('\\', '-');
						const parsedValue = parseISO(normalisedValue);
						if (normalisedValue.length === 10 && isValid(parsedValue)) {
							handleDayClick(parsedValue);
						} else {
							onChange(normalisedValue);
						}
					}}
					disabled={isDisabled}
					css={{ color: isValid(parseISO(value)) ? undefined : 'darkred' }}
					value={value}
				/>
			</FieldInput>

			{errors.map(({ message, data }) => (
				<Alert appearance="danger" key={message}>
					{message}
					{data ? ` - ${JSON.stringify(data)}` : null}
				</Alert>
			))}
		</FieldContainer>
	);
};

export default CalendarDayField;

Implementation.js

const { CalendarDay } = require('@keystonejs/fields');

// Using the text implementation because we're going to stringify the array of results.
// We could store this in another table, but this would require writing a complex controller.
// JSON.stringify feels good enough for this simple field.

module.exports = {
	Implementation: CalendarDay.implementation,
	MongoIntegerInterface: CalendarDay.adapters.mongoose,
	KnexIntegerInterface: CalendarDay.adapters.knex,
};

index.js

const { Implementation, MongoIntegerInterface, KnexIntegerInterface } = require('./Implementation');

module.exports = {
	type: 'CustomCalendarDay',
	implementation: Implementation,
	views: {
		Controller: require.resolve('@keystonejs/fields/types/CalendarDay/views/Controller/dist/fields.cjs'),
		Field: require.resolve('./Field'),
		Filter: require.resolve('@keystonejs/fields/types/CalendarDay/views/Filter/dist/fields.cjs'),
		Cell: require.resolve('@keystonejs/fields/types/CalendarDay/views/Cell/dist/fields.cjs'),
	},
	adapters: {
		mongoose: MongoIntegerInterface,
		knex: KnexIntegerInterface,
	},
};

Now use in Models

const CalendarDay = require('../server/CustomField/CalendarDay')

module.exports = {
	fields: {
		date: {
		    type: CalendarDay
		}
	}
};

NOTE: Install "react-day-picker": "8.0.0-beta.37" from npm install [email protected]