[IndexTable] - Importer un document au click d'une ligne

[mbriand-lucca]

trafficstars

Hello team LF !

We must import a document when clicking on an indexTable row. We want to be able to click anywhere on the row, not just on a specific part of it.

Initially, we thought about having a button and replacing a column with this "import a file" button. However, we realized that when using the following code, the size of the row changes, so we end up with rows containing this code being larger than those that don't :

<label>
   <input
      (change)="import($event.target.files)"
      (cancel)="$event.stopPropagation()"
      type="file"
      accept=".pdf, .jpg, .jpeg, .png"
      class="u-mask"
    />
   <span class="button">{{ 'Toto' | tr }}</span>
</label>

As a result, we decided to hide the entire input, but other issues arose: "How do we enable clicking while hiding this part," especially since our table is managed via a ngFor. We had to implement some hacks, handling the click on the TypeScript side, but we wonder if what we did is fully accessible. @vvalentin-lucca maybe you could help us with this.

Here is the PR that attempted this: https://github.com/LuccaSA/Cleemy.Procurement/pull/5191

We were also wondering if it’s possible to enable actions on row clicks without having to select only a specific element of the row. Do others need to import upon clicking a row?

[BertrandPodevin]

Hy @mbriand-lucca ! A bit late but what you want to achieve can easily be done natively with indexTable-body-row-cell-link. Any interactive element (link, button, input...) with this class put in the first cell of a row will see his interactive zone extended to the whole line.

So for an input file :

<table class="indexTable">
	<thead class="indexTable-head">
		<tr class="indexTable-head-row">
			<th class="indexTable-head-row-cell" scope="col">Label</th>
			...
		</tr>
	</thead>
	<tbody class="indexTable-body">
		<tr class="indexTable-body-row">
			<td class="indexTable-body-row-cell">
				<label class="indexTable-body-row-cell-link" for="myInput">
					<span>Importer un ficher</span>
				</label>
				<input
					id="myInput"
					type="file"
					accept=".pdf, .jpg, .jpeg, .png"
					class="indexTable-body-row-cell-link u-mask"
				/>
			</td>
			...
		</tr>
	</tbody>
</table>

[vvalentin-lucca]

<!-- do not forget to tabindex for keyboard navigation-->

caution: it's the input that must take the focus, not its label.

[BertrandPodevin]

@vvalentin-lucca snippet eddited with a better way to do it : indexTable-body-row-cell-link on both label and input work well with both clicks and keyboard navigation

On label it extends interactive zone on the whole line On input it take focus and trigger the visual line outline