Merge pull request #135 from uvarov-frontend/hotfix/input_position

Hotfix/input position
uvarov-frontend · Oct 12, 2023 · af96831 · af96831
2 parents 7916a4a + 19d12e3
commit af96831
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/demo/index.css b/demo/index.css
@@ -19,7 +19,7 @@
 }
 
 .wrapper-calendar {
-	@apply w-[550px] max-w-max justify-center items-center flex flex-col mb-4
+	@apply w-[550px] max-w-max justify-center items-center flex flex-col mb-4 relative
 }
 
 .input {

diff --git a/package/src/scripts/methods/handlerInput.ts b/package/src/scripts/methods/handlerInput.ts
@@ -4,13 +4,18 @@ import resetCalendar from './resetCalendar';
 
 let currentSelf: null | IVanillaCalendar = null;
 
+const setPositionCalendar = (input: HTMLInputElement, calendar: HTMLElement) => {
+	const inputInfo = input.getBoundingClientRect();
+	calendar.style.left = `${inputInfo.left}px`;
+	calendar.style.top = `${inputInfo.top + inputInfo.height}px`;
+};
+
 const createCalendarToInput = (self: IVanillaCalendar) => {
 	if (!self.HTMLInputElement) return;
 
 	const calendar = document.createElement('div');
 	calendar.className = `${self.CSSClasses.calendar} ${self.CSSClasses.calendarToInput} ${self.CSSClasses.calendarHidden}`;
-	calendar.style.left = `${self.HTMLInputElement.offsetLeft}px`;
-	calendar.style.top = `${self.HTMLInputElement.offsetTop + self.HTMLInputElement.clientHeight}px`;
+	setPositionCalendar(self.HTMLInputElement, calendar);
 	self.HTMLElement = calendar;
 	document.body.append(self.HTMLElement);
 
@@ -35,8 +40,7 @@ const handlerInput = (self: IVanillaCalendar) => {
 
 	self.HTMLInputElement.addEventListener('click', () => {
 		if (self.HTMLElement && self.HTMLInputElement) {
-			self.HTMLElement.style.left = `${self.HTMLInputElement.offsetLeft}px`;
-			self.HTMLElement.style.top = `${self.HTMLInputElement.offsetTop + self.HTMLInputElement.clientHeight}px`;
+			setPositionCalendar(self.HTMLInputElement, self.HTMLElement);
 			self.HTMLElement.classList.remove(self.CSSClasses.calendarHidden);
 		} else if (self.HTMLElement) {
 			self.HTMLElement.classList.remove(self.CSSClasses.calendarHidden);

diff --git a/package/src/styles/vanilla-calendar.css b/package/src/styles/vanilla-calendar.css
@@ -1,5 +1,5 @@
 .vanilla-calendar {
-	@apply p-4 rounded-xl opacity-100 transition-all relative flex flex-col min-w-[275px] max-w-full h-max
+	@apply p-4 rounded-xl opacity-100 transition-opacity relative flex flex-col min-w-[275px] max-w-full h-max
 }
 
 .vanilla-calendar button:focus-visible {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: [
-		'./demo/index.html',
+		'./demo/**/*.{html,css}',
 		'./src/**/*.{js,ts}',
 	],
 	theme: {