The input form does not work in mobile popup

Hello friends
I ran into a problem that I hope you can help me with.
The website I am building opens articles in a popup page. I want to add a comment section for articles.
But the problem is that in mobile phones, data entry form does not activate by touch (so I can’t enter information). And this problem does not exist in the computer.
so, It seems the form’s inputbox works with mouse click, but it does not work with a touch.
What could be the reason?
you can see the problem here: http://test6.harfrooz.com/
I’ll be really thankful for any help.

 

I have seen this with jquery drag drop. If the popup has drag drop on it then conditionally turn it off when the useragent is a phone.

 

I can't find the 'problem" on your page because I don't speak the language so I can't even figure out where said dialog or ajax even exists... but... the endless pointless classes for nothing, endless pointless DIV for nothing, and gross inefficiencies of the code are likely what's biting you.

Much less the broken gibberish outmoded garbage that is jQuery.

In fact you have a poster child for how pointless jQuery is... since it's maybe saving you 60 bytes for what should probably be more like this:

let x = Object.assign(new XMLHttpRequest(), {

	responseType : "json",
	
	onerror : (event) => {
		throw new Error("There was a networking problem with this request");
	},
	
	onload : (event) => {
		const x = event.currentTarget;
		if (x.status === 200) {
			const
				{ action, groupedNewsUserActionCount, newsId } = x.response,
				actionId = `_${newsId}_${action}`;
			document.getElementById(
				`total_action${actionId}`
			).textContent = groupedNewsUserActionCount || "";
			document.getElementbyId(
				`a${actionId}_add_action`
			).style.display = none;
			document.getElementById(
				`a${actionId}_cancel_action`
			).style.display = block;			
			document.getElementById(
				`div${actionId}_add_action_block`
			).classList.add(
				"news-user-reactions-item-voted"
			);
		 } else throw new Error(`Response failed, status code: ${x.status}`);
	}
	
} );

x.open("post", "/news/react");
x.send( { _token : csrf_token(), newsId, action } );

Code (markup):

BUT... even then you're wasting time with a lot of pointless junk like the endless ID lookups... the two display should be handled off a parent class on the container, thus those shouldn't have unique ID or even be accessed in the scripting.

I'd have to see the markup/structure of what you're targeting with this script, but realistically for that type of AJAX request I'd probably have something more like:

let x = Object.assign(new XMLHttpRequest(), {

	responseType : "json",
	
	onerror : (event) => {
		throw new Error("There was a networking problem with this request");
	},
	
	onload : (event) => {
		const x = event.currentTarget;
		if (x.status === 200) {
			const
				{ action, groupedNewsUserActionCount, newsId } = x.response,
				parent = document.getElementById("totalActions_" + newsId);
			parent.querySelector(".count").textContent = groupedNewsUserActionCount || "";
			parent.classList.add("voted");
		} else throw new Error(`Response failed, status code: ${x.status}`);
	}
	
} );

x.open("post", "/news/react");
x.send( { _token : csrf_token(), newsId, action } );

Code (markup):

Though that would require a complete rewrite of the page so it's not sharting classees all over the place for everything. The show/hide of the buttons styled off the existence of .voted as a child.

Reducing the amount of code used overall by something like a factor of four or five.

But really with that bloated DIV soup code, that entire site needs to be deep sixed and started over. 80k of markup for 9k of plaintext is not good.